/*
 Theme Name:   City Towers Theme
 Theme URI:    
 Description:  WP Theme for City Towers Apartments by Rhea Flouch and Rohan Catsburg
 Author:       Consofas Design lab
 Author URI:   http://consofas.com
 Template:     wpnation
 Version:      1.2
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  nation
*/

@import url("../wpnation/style.css");

/* =Theme customization starts here
	Teal #7dccc7 Dark Teal #016668  Tangerine #ed5a28
-------------------------------------------------------------- */

#top-content-divider {
    background: #fff;
    border-bottom: none;
    border-top: 1px dotted #bbb;
    box-shadow: none;
    margin-bottom: 40px;
    margin-top: 4px;
    padding-bottom: 22px !important;
    padding-top: 8px;
}
#information-wrap {
	background:none !important;
}

#main-page-header-wrap {
    background-color: #7dccc7;
}
#main-title-wrap {
	position: relative;
}
#crumbs {
    float: none;
    position: absolute;
    top: 0;
}
#main-logo {
    margin-left: -20px;
    margin-top: 20px;
    opacity: 1;
    width: 220px;
}
#top-navigation-menu li a:hover {
    color: #ed5a28 !important;
}
#prefooter-wrap .map-image img {
	width: 100%;
	height: auto;
}
.page-template-contact #wrapper {
	background-color: #DDDDDC;
}
.contact-sidebar .cdl_footer_contact_widget, .contact-sidebar .cdl_footer_text_widget {

}
.contact-sidebar .footer-header, #footer-wrap .widgettitle, .contact-sidebar #footer-address-wrap .icon-compass, .contact-sidebar #footer-phone-wrap .icon-phone {
	color: #111;
}
.contact-sidebar #email-title, .contact-sidebar #phone-title, .contact-sidebar #post-title, .contact-sidebar #address-title {
    float: left;
    width: 80px;
	color: #111;
}
.contact-sidebar #email-value, .contact-sidebar #phone-value, .contact-sidebar #post-value, .contact-sidebar #address-value {
    float: left;
}
#footer-contact-info-wrap {
    border-top: none;
    margin-top: 0;
    padding-bottom: 18px;
    padding-right: 5px;
    padding-top: 0;
}
#prefooter-wrap #post-title {
    float: left;
    font-size: 1.2em;
    font-weight: 300;
    text-transform: uppercase;
}
#prefooter-wrap #post-value{
    width: 210px;
    float: right;
}
#email-value, #phone-value, #post-value, #address-value {
    text-align: left;
}
#phone-title, #post-title, #address-title {
    font-size: 1.2em;
}
#email-title {
    font-size: 1.6em;
}
#footer-address-wrap, #footer-post-wrap {
    margin-bottom: 8px;
}
#prefooter-wrap .four.columns .social-wrap-divider:last-child {
    display: none;
}

.textwidget img.normal {
    height: auto;
    width: inherit;
}
.minnightswarning { color: #ed5a28; font-style: italic; font-size: small; margin: 5px 0;}
.clearboth { clear: both; }

/* Book Now on single room pages is an <a>, not a <button>, so it needs
   inline-block to keep the button padding/margins from #book-button. */
a#book-button {
	display: inline-block;
	text-decoration: none;
	line-height: normal;
}
a#book-button:hover {
	color: #fff;
}
#room-book-wrap {
	margin-top: 8px;
}

/* Contact form Send button. The CF7 button id was renamed from #submit-button
   to #contact-send-button so the theme's legacy contact validation in
   allscript.js (which hijacks #submit-button and blocks the submit) no longer
   matches it. Styling below mirrors the old .contact-page #submit-button rules
   so the button looks unchanged. */
.contact-page #contact-send-button {
	border: 2px solid #de543e;
	background: none;
	border-radius: 0;
	color: #de543e;
	font-weight: 300;
	font-size: 1.1em;
	padding: 10px 20px;
	text-shadow: none;
	font-family: "Open Sans", sans-serif;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	margin-top: 14px;
	cursor: pointer;
}
.contact-page #contact-send-button:hover {
	background-color: #de543e;
	color: #fff;
}
.contact-page #contact-send-button:focus {
	outline: 0;
}
.contact-page #contact-send-button span {
	margin-left: 5px;
	font-size: 0.9em !important;
}

/* Reservation Enquiry form (CF7 form 815 on the reservation-enquiry page,
   page-id-816). That page uses the default template, so the theme's
   .contact-page form styling never reaches it - style it to match here:
   consistent bordered inputs + the orange Send button. */
.page-id-816 .wpcf7-form input[type="text"],
.page-id-816 .wpcf7-form input[type="email"],
.page-id-816 .wpcf7-form input[type="tel"],
.page-id-816 .wpcf7-form input[type="date"],
.page-id-816 .wpcf7-form input[type="number"],
.page-id-816 .wpcf7-form select,
.page-id-816 .wpcf7-form textarea {
	border: 1px solid #ddd;
	border-radius: 0;
	padding: 8px;
	font-family: "Open Sans", sans-serif;
	font-size: 1em;
	box-sizing: border-box;
	background: #fff;
	color: #444;
	max-width: 100%;
}
/* Fields fill their column (single column by default / on mobile) */
.page-id-816 .wpcf7-form input[type="text"],
.page-id-816 .wpcf7-form input[type="email"],
.page-id-816 .wpcf7-form input[type="tel"],
.page-id-816 .wpcf7-form input[type="date"],
.page-id-816 .wpcf7-form select,
.page-id-816 .wpcf7-form textarea {
	width: 100%;
}
.page-id-816 .wpcf7-form label,
.page-id-816 .wpcf7-form p {
	display: block;
	margin-bottom: 12px;
	font-weight: 300;
}

/* On wide (PC) screens the full-width template gives room for 2 fields
   per row. Each field wrapper (<p> for the placeholder fields, <label>
   for the dated/select fields) takes ~half the width; the submit row and
   any CF7 response message span the full width. */
@media only screen and (min-width: 700px) {
	.page-id-816 .wpcf7-form {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	.page-id-816 .wpcf7-form > p,
	.page-id-816 .wpcf7-form > label {
		width: 48%;
		box-sizing: border-box;
	}
	.page-id-816 .wpcf7-form > p.rf-message,
	.page-id-816 .wpcf7-form > p.rf-submit,
	.page-id-816 .wpcf7-form > .wpcf7-response-output {
		width: 100%;
	}
}
.page-id-816 .wpcf7-form textarea {
	height: 110px;
	resize: vertical;
}

/* Single-room featured-image slider (driven by js/room-slider.js).
   Slides fade one at a time inside a uniform 16:9 viewport; images are
   cover-cropped so mixed aspect ratios line up cleanly. */
.reservation-page-slider.rps-ready {
	position: relative;
	overflow: hidden;
}
.reservation-page-slider.rps-ready ul {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 0;
	padding-bottom: 56.25%; /* 16:9 */
}
.reservation-page-slider.rps-ready ul li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
	z-index: 1;
}
.reservation-page-slider.rps-ready ul li.rps-active {
	opacity: 1;
	z-index: 2;
}
.reservation-page-slider.rps-ready ul li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.reservation-page-slider .rps-dots {
	position: absolute;
	bottom: 12px;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 5;
}
.reservation-page-slider .rps-dots button {
	width: 11px;
	height: 11px;
	padding: 0;
	margin: 0 4px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}
.reservation-page-slider .rps-dots button.rps-on {
	background: #ed5a28;
}

/* ============================================================
   Block editor / Kadence Blocks support
   The theme predates Gutenberg: it constrains content to a fixed
   column and its global reset strips block spacing. These rules let
   wide/full blocks break out and restore sensible block defaults.
   ============================================================ */

/* Wide & full alignment: break out of the fixed content column.
   Scoped to the editor's content area so it does not touch theme layout. */
.entry-content .alignfull,
.page-wrap .alignfull,
.reservation-page-wrap .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.entry-content .alignwide,
.page-wrap .alignwide,
.reservation-page-wrap .alignwide {
	width: 90vw;
	max-width: 1200px;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Kadence full-width rows manage their own width - let them span fully. */
.page-wrap .kb-row-layout-wrap.kb-full-width,
.page-wrap .wp-block-kadence-rowlayout.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Restore block defaults the 2016 reset removed (only inside block content). */
.page-wrap ul:not([class]),
.page-wrap ol:not([class]),
.entry-content ul:not([class]),
.entry-content ol:not([class]) {
	margin: 0 0 1.5em 1.5em;
}
.page-wrap ul:not([class]) { list-style: disc; }
.page-wrap ol:not([class]) { list-style: decimal; }
.page-wrap .wp-block-image img { max-width: 100%; height: auto; }
.page-wrap .wp-block-buttons { margin-bottom: 1em; }
/* keep block media from being clipped by any inherited overflow */
.page-wrap .wp-block-cover,
.page-wrap .wp-block-group { overflow: visible; }

/* Kadence Canvas template: full-width wrapper. Normal blocks sit in a
   readable centred column; wide/full blocks and Kadence full-width rows
   span wider. */
.kadence-canvas {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
.kadence-canvas > * {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
.kadence-canvas > .alignwide {
	max-width: 1240px;
}
.kadence-canvas > .alignfull,
.kadence-canvas > .wp-block-kadence-rowlayout.alignfull,
.kadence-canvas > .kb-row-layout-wrap.kb-full-width {
	/* The canvas is already full content-width, so span it directly with
	   width:100% instead of 100vw - avoids the scrollbar-gap offset. */
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Brand colour utility classes mirroring the theme.json palette.
   Guarantees block colour classes render even if WordPress does not emit the
   global-styles CSS (this old classic theme suppresses it). Text colours use
   !important to override the theme's aggressive heading/element colours. */
.has-ct-tangerine-color { color: #ed5a28 !important; }
.has-ct-tangerine-deep-color { color: #c8481b !important; }
.has-ct-teal-color { color: #7dccc7 !important; }
.has-ct-teal-soft-color { color: #e4f2f0 !important; }
.has-ct-teal-dark-color { color: #016668 !important; }
.has-ct-sand-color { color: #fdece3 !important; }
.has-ct-paper-color { color: #f4f8f7 !important; }
.has-ct-ink-color { color: #14201f !important; }
.has-ct-white-color { color: #ffffff !important; }
.has-ct-tangerine-background-color { background-color: #ed5a28; }
.has-ct-tangerine-deep-background-color { background-color: #c8481b; }
.has-ct-teal-background-color { background-color: #7dccc7; }
.has-ct-teal-soft-background-color { background-color: #e4f2f0; }
.has-ct-teal-dark-background-color { background-color: #016668; }
.has-ct-sand-background-color { background-color: #fdece3; }
.has-ct-paper-background-color { background-color: #f4f8f7; }
.has-ct-ink-background-color { background-color: #14201f; }
.has-ct-white-background-color { background-color: #ffffff; }
.has-ct-white-border-color { border-color: #ffffff; }

/* Helper classes for the NTA / block-built pages (applied via block "Additional CSS class") */
.nta-card { height: 100%; transition: transform .16s, box-shadow .16s; }
.nta-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(1, 72, 77, .45); }
.nta-chip { font-weight: 600; }
.nta-step-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 50%;
	background: #ed5a28; color: #fff; font-weight: 800; font-size: 1.15rem;
	margin: 0 0 12px;
}
.kadence-canvas .wp-block-heading { line-height: 1.12; }
.kadence-canvas .wp-block-details { margin-bottom: 12px; }
.kadence-canvas .wp-block-details summary { cursor: pointer; font-weight: 700; padding: 14px 0; }
.kadence-canvas .wp-block-table td,
.kadence-canvas .wp-block-table th { padding: 12px 16px; text-align: left; }
.kadence-canvas .wp-block-table { margin-left: 0; margin-right: 0; }

.page-id-816 .wpcf7-form .wpcf7-submit {
	border: 2px solid #de543e;
	background: none;
	border-radius: 0;
	color: #de543e;
	font-weight: 300;
	font-size: 1.1em;
	padding: 10px 20px;
	text-shadow: none;
	font-family: "Open Sans", sans-serif;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	margin-top: 14px;
	cursor: pointer;
	width: auto;
}
.page-id-816 .wpcf7-form .wpcf7-submit:hover {
	background-color: #de543e;
	color: #fff;
}
@media only screen and (min-width: 1029px) {
	#footer-wrap .container {
		width: 960px;
	}
	#footer-wrap .container .five.columns {
	    width: 280px;
	}
	#footer-wrap .container .offset-by-one {
	    margin-right: 0 !important;
	    padding-left: 0 !important;
	}
	#prefooter-wrap .five.columns {
	    margin-right: 45px;
	}
}
@media only screen and (min-width: 1030px) and (max-width: 1289px) {
	#main-logo {
	    display: block;
	}
	#main-logo-min {
	    display: none;
	}

}
@media only screen and (min-width: 769px) and (max-width: 1029px) {
	#prefooter-wrap #post-value {
		width: 143px;
	}
}

/* Nav dropdown sizing: the theme's sub-menu is a fixed 180px, too narrow for
   the longer "Accommodation" labels (e.g. Insurance & Temporary), so items
   spilled past the white panel. Widen the panel and keep labels on one line. */
#top-navigation-menu ul.sub_menu {
	width: 250px !important;
}
#top-navigation-menu ul.sub_menu > li > a {
	white-space: nowrap !important;
}

/* Cover hero/CTA buttons alignment.
   The flex Buttons block ignores the constrained content-size (it computes to
   100% instead of the 1080px the heading/paragraph get), so on wide screens the
   buttons pinned to the far left while the text was centered in the content
   column. Constrain the Buttons block to the same content width so it lines up.
   (1080px matches theme.json contentSize.) Centered CTA buttons stay centered. */
.wp-block-cover__inner-container.is-layout-constrained > .wp-block-buttons {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}