/*
Theme Name: Mississauga Stays Child
Template: hello-elementor
Description: Child theme of Hello Elementor carrying the site header, footer, and brand styling for mississaugastays.com.
Version: 1.9.0
Text Domain: mississauga-stays-child
*/

/* ============ Brand tokens ============ */
:root{
  --navy:#0f2c4d;
  --navy-deep:#0a1d33;
  --gold:#b8925a;
  --gold-bright:#c9a468;
  --paper:#faf7f1;
  --paper-raised:#ffffff;
  --ink-soft:#5b6472;
  --line:#e6ddcd;
}

body{ font-family:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
h1,h2,h3{ font-family:'Fraunces', 'Iowan Old Style', Georgia, serif; }

/* ============ Header ============ */
.ms-wrap{ max-width:1180px; margin:0 auto; padding-inline:24px; }
.ms-header{ background:var(--navy-deep); border-bottom:1px solid rgba(255,255,255,.08); position:relative; z-index:40; }
.ms-nav{ display:flex; align-items:center; justify-content:space-between; padding-block:16px; gap:20px; }
.ms-logo{ font-family:'Fraunces',serif; font-size:21px; color:#fff; font-weight:600; white-space:nowrap; }
.ms-logo span{ color:var(--gold-bright); }

/* Uploaded logo (Customize > Site Identity) — forced white so it reads
   correctly on the dark navy header, whatever colors the source file has. */
.ms-logo.ms-logo--image{ display:flex; align-items:center; }
.ms-logo--image .custom-logo-link{ display:block; line-height:0; }
.ms-logo--image img.custom-logo{
  max-height:52px;
  width:auto;
  display:block;
  filter:brightness(0) invert(1);
  -webkit-filter:brightness(0) invert(1);
}
@media (max-width: 860px){ .ms-logo--image img.custom-logo{ max-height:34px; } }
.ms-nav-links{ flex:1; display:flex; justify-content:center; }
.ms-menu{ list-style:none; display:flex; flex-wrap:wrap; gap:26px; margin:0; padding:0; }
.ms-menu a{ color:#cfd9e6; text-decoration:none; font-size:14.5px; font-weight:500; }
.ms-menu a:hover{ color:#fff; }
.ms-phone{ display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font-size:14.5px; font-weight:600; border-left:1px solid rgba(255,255,255,.18); padding-left:18px; white-space:nowrap; }
.ms-phone svg{ fill:var(--gold-bright); }
.ms-menu-toggle{ display:none; background:none; border:none; color:#fff; font-size:26px; cursor:pointer; }
@media (max-width: 860px){
  .ms-nav-links{ display:none; width:100%; order:3; justify-content:flex-start; }
  .ms-nav-links.is-open{ display:flex; }
  .ms-menu{ flex-direction:column; gap:14px; padding-block:16px; }
  .ms-menu-toggle{ display:block; }
}

/* ============ Footer ============ */
.ms-footer{ background:var(--navy-deep); color:#b7c3d3; padding-block:56px 28px; }
.ms-foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.ms-foot-logo{ font-family:'Fraunces',serif; color:#fff; font-size:20px; font-weight:600; }
.ms-foot-logo span{ color:var(--gold-bright); }

/* Uploaded logo reused in the footer's first column — same white-forced
   treatment as the header, since the footer background is dark navy too. */
.ms-foot-logo--image{ display:flex; }
.ms-foot-logo--image .custom-logo-link{ display:block; line-height:0; }
.ms-foot-logo--image img.custom-logo{
  max-height:48px;
  width:auto;
  display:block;
  filter:brightness(0) invert(1);
  -webkit-filter:brightness(0) invert(1);
}
.ms-footer p{ font-size:14px; margin-top:12px; max-width:34ch; }
.ms-footer h4{ color:#fff; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.ms-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ms-footer a{ color:#b7c3d3; text-decoration:none; font-size:14px; }
.ms-footer a:hover{ color:#fff; }
.ms-foot-contact{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.ms-foot-contact a{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:600; }
.ms-foot-contact svg{ fill:var(--gold-bright); flex:none; }
.ms-foot-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding-top:22px; display:flex; justify-content:space-between; font-size:12.5px; color:#7f8ea1; flex-wrap:wrap; gap:10px; }
.ms-foot-bottom a{ color:#a9b7c8; text-decoration:none; }
.ms-foot-bottom a:hover{ color:#fff; }
.ms-foot-contact span{ display:flex; align-items:center; gap:10px; color:#b7c3d3; font-size:14px; }
.ms-foot-contact span svg{ fill:none; stroke:var(--gold-bright); flex:none; }
@media (max-width: 860px){ .ms-foot-grid{ grid-template-columns:1fr; gap:28px; } .ms-foot-bottom{ flex-direction:column; align-items:flex-start; } }

/* ============ WhatsApp float ============ */
.ms-wa-float{ position:fixed; bottom:24px; right:24px; z-index:999; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.4); text-decoration:none; }
.ms-wa-float svg{ width:28px; height:28px; fill:#fff; }

/* ============ Elementor page-content brand touches ============ */
/* (headings/buttons/backgrounds are set directly on each Elementor widget;
   these only cover what widget Style controls can't reach) */

.hero-illustration .skyline-card{ position:relative; background:linear-gradient(160deg,#12325a,#0a1d33); border-radius:6px; border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 70px -30px rgba(0,0,0,.6); overflow:hidden; aspect-ratio:4/3.6; }
.hero-illustration .skyline-card svg{ width:100%; height:100%; display:block; }
.hero-illustration .quick-card{ position:absolute; left:-18px; bottom:-26px; background:#fff; border-radius:6px; box-shadow:0 20px 45px -25px rgba(15,44,77,.35); padding:18px 20px; width:min(280px, 78%); border:1px solid var(--line); }
.hero-illustration .qc-eyebrow{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:0 0 6px; }
.hero-illustration .qc-title{ color:var(--navy); font-family:'Fraunces',serif; font-size:18px; margin:0; }
.hero-illustration small{ color:var(--ink-soft); font-size:12.5px; }
@media (max-width: 900px){ .hero-illustration .quick-card{ position:static; margin-top:16px; width:100%; } }

.hero-stats .elementor-icon-list-items{ gap:30px; flex-wrap:wrap; }
.hero-stats .elementor-icon-list-item{ border-left:2px solid var(--gold); padding-left:12px; color:#a9b7c8; font-size:13px; }
.hero-stats .elementor-icon-list-icon{ display:none; }

.incl-item .elementor-icon-box-wrapper{ flex-direction:row; align-items:center; gap:14px; text-align:left; }
.incl-item{ background:#fff; border:1px solid var(--line); border-radius:4px; padding:18px 20px; margin-bottom:14px; }
.incl-item .elementor-icon-box-icon{ background:#f1e6d2; border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
.incl-item .elementor-icon-box-description{ display:none; }

.serv-card{ border:1px solid var(--line); border-radius:6px; padding:30px 26px !important; transition:border-color .15s ease; }
.serv-card:hover{ border-color:var(--gold); }

.amen-item{ background:var(--navy); border:1px solid rgba(255,255,255,.1); border-radius:6px; padding:20px 10px !important; text-align:center; margin:0 4px 8px; }
.amen-item .elementor-icon-box-title{ color:#fff; }
.amen-item .elementor-icon-box-icon i{ color:var(--gold-bright); }

.inq-side{ border-radius:8px 0 0 8px; }
.inq-contact-list .elementor-icon-list-item a{ color:#fff; font-weight:600; font-size:14.5px; }
.inq-contact-list .elementor-icon-list-icon i{ color:var(--gold-bright); }

/* Contact Form 7 "Booking Form" (v3: high-specificity + !important so this always
   wins over Contact Form 7's own default CSS and any theme/Elementor button
   defaults, regardless of load order. Rules are written broadly (.wpcf7-form,
   not only .inq-form-wrap ...) so they apply even if the wrapping column ever
   loses its custom "inq-form-wrap" class.
   See contact-form-7-booking-form.md for the matching Form-tab code. */
.wpcf7-form,
.inq-form-wrap .wpcf7-form{ margin:0 !important; }
.wpcf7-form .cf7-row,
.inq-form-wrap .cf7-row{ display:grid !important; grid-template-columns:1fr !important; gap:0 !important; }
.wpcf7-form .cf7-field,
.inq-form-wrap .cf7-field{ display:block !important; width:100% !important; margin:0 0 8px !important; }
.wpcf7-form p,
.inq-form-wrap .wpcf7-form p{ margin:0 0 8px !important; }
.wpcf7-form .wpcf7-form-control-wrap,
.inq-form-wrap .wpcf7-form-control-wrap{ display:block !important; width:100% !important; margin:0 !important; }
.wpcf7-form label,
.inq-form-wrap label{ display:block !important; width:100% !important; font-size:12px !important; font-weight:700 !important; color:var(--navy) !important; margin:0 0 4px !important; letter-spacing:.02em; text-transform:none !important; }
.wpcf7-form .wpcf7-form-control,
.inq-form-wrap .wpcf7-form-control{
  width:100% !important;
  padding:12px 15px !important;
  border:1.5px solid #e3e7ec !important;
  border-radius:8px !important;
  font-size:14.5px !important;
  background:#fff !important;
  color:var(--navy-deep) !important;
  font-family:inherit !important;
  line-height:1.3 !important;
  box-shadow:0 1px 2px rgba(15,44,77,.04) !important;
  transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none;
  appearance:none;
}
.wpcf7-form textarea.wpcf7-form-control,
.inq-form-wrap textarea.wpcf7-form-control{ min-height:70px !important; resize:vertical; }
.wpcf7-form .wpcf7-form-control:hover,
.inq-form-wrap .wpcf7-form-control:hover{ border-color:#c9d2dc !important; }
.wpcf7-form .wpcf7-form-control:focus,
.inq-form-wrap .wpcf7-form-control:focus{ outline:none !important; border-color:var(--gold) !important; box-shadow:0 0 0 4px rgba(184,146,90,.15) !important; }
.wpcf7-form input.wpcf7-submit,
.wpcf7-form input[type="submit"],
.inq-form-wrap input.wpcf7-submit,
.inq-form-wrap input[type="submit"]{
  width:100% !important;
  padding:15px 26px !important;
  margin-top:6px !important;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  background-color:var(--gold) !important;
  color:var(--navy-deep) !important;
  border:none !important;
  border-radius:8px !important;
  font-weight:700 !important;
  font-size:15px !important;
  letter-spacing:.02em;
  cursor:pointer;
  font-family:inherit !important;
  box-shadow:0 14px 30px -12px rgba(184,146,90,.65) !important;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  text-transform:none !important;
}
.wpcf7-form input.wpcf7-submit:hover,
.inq-form-wrap input.wpcf7-submit:hover{ opacity:.95; transform:translateY(-1px); box-shadow:0 18px 34px -12px rgba(184,146,90,.75) !important; }
.wpcf7-form input.wpcf7-submit:active,
.inq-form-wrap input.wpcf7-submit:active{ transform:translateY(0); }
.wpcf7-form .wpcf7-response-output,
.inq-form-wrap .wpcf7-response-output{ font-size:12.5px !important; border-radius:6px !important; margin:10px 0 0 !important; padding:8px 12px !important; }
.wpcf7-form .wpcf7-not-valid-tip,
.inq-form-wrap .wpcf7-not-valid-tip{ font-size:11.5px !important; margin-top:3px !important; color:#c0392b !important; }
.wpcf7-form .wpcf7-form-control.wpcf7-not-valid,
.inq-form-wrap .wpcf7-form-control.wpcf7-not-valid{ border-color:#c0392b !important; }
/* Some browser extensions (password managers) inject their own icon into email/
   password-like fields — this doesn't affect real visitors without that extension,
   but these rules stop it from crowding the field where possible. */
.wpcf7-form input::-webkit-contacts-auto-fill-button,
.wpcf7-form input::-webkit-credentials-auto-fill-button,
.inq-form-wrap input::-webkit-contacts-auto-fill-button,
.inq-form-wrap input::-webkit-credentials-auto-fill-button{ visibility:hidden; position:absolute; right:0; }

.faq-accordion .elementor-tab-title{ font-family:'Fraunces',serif; color:var(--navy); font-size:17px; font-weight:500; }
.faq-accordion .elementor-tab-content{ font-size:14.5px; color:var(--ink-soft); }

/* ============ Hero: vertical-center the two columns + reservation form card ============ */
.hero-row.elementor-section > .elementor-container{ align-items:center; }
.hero-form-card,
.hero-form-card.elementor-column,
.hero-form-card > .elementor-widget-wrap{
  border-radius:14px !important;
  overflow:visible !important;
}
.hero-form-card{
  background:#fff !important;
  box-shadow:0 30px 60px -18px rgba(10,29,51,.35), 0 8px 20px -6px rgba(10,29,51,.15) !important;
  width:100%;
  max-width:100%;
}
.hero-contact-links .elementor-icon-list-items{ gap:24px; flex-wrap:wrap; margin:14px 0; }
.hero-contact-links .elementor-icon-list-item a{ color:#fff; font-weight:600; font-size:14.5px; }
.hero-contact-links .elementor-icon-list-icon i{ color:var(--gold-bright); }
@media (max-width: 900px){
  .hero-row.elementor-section > .elementor-container{ align-items:stretch; }
}

/* ============ Services placeholder photo ============ */
.serv-photo img{ border-radius:8px; box-shadow:0 30px 70px -30px rgba(0,0,0,.6); width:100%; height:auto; }

/* ============ FAQ "Still have questions?" CTA box ============ */
.faq-cta-box{ border-radius:8px; }
.faq-cta-icon .elementor-icon-list-icon{ width:44px; height:44px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center; }
.faq-cta-icon .elementor-icon-list-icon i{ color:var(--gold-bright); font-size:18px; }
.faq-cta-icon .elementor-icon-list-item{ list-style:none; }
.faq-cta-icon .elementor-icon-list-text{ display:none; }