/*
Theme Name: The Country Chic
Theme URI: https://thecountrychic.co.za/
Description: Block theme for The Country Chic, Riebeek Kasteel. Home, About and Contact page patterns, live shop-hours badge, Forminator form styling.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.3.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: country-chic
*/

:root {
  --cc-divider: rgba(32, 30, 29, .16);
  --cc-divider-dark: rgba(245, 234, 216, .2);
  --cc-radius: 28px;
}

/* ---------- page rhythm ---------- */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part { margin-block-start: 0; }
.wp-block-post-content > .cc-section,
.wp-block-post-content > .alignfull { margin-block-start: 0; }
.cc-section { padding-block: clamp(56px, 8vw, 96px); }
.cc-section.cc-tight-top { padding-top: 0; }
.cc-section.cc-hero-section { padding-top: clamp(24px, 5vw, 56px); }

/* ---------- type helpers ---------- */
.cc-kicker {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wp--preset--color--red-dark); margin-bottom: 18px;
}
.cc-signature { font-family: var(--wp--preset--font-family--heading); font-size: 20px; }
.cc-signature span { font-family: var(--wp--preset--font-family--body); font-size: 14px; color: var(--wp--preset--color--muted); margin-left: 6px; }
.cc-note { font-size: 14px; color: var(--wp--preset--color--muted); }
.cc-hashtag {
  font-family: var(--wp--preset--font-family--heading); font-size: clamp(40px, 6vw, 80px);
  line-height: 1; color: var(--wp--preset--color--red-dark); overflow-wrap: anywhere; margin: 0;
}
.cc-quote {
  font-family: var(--wp--preset--font-family--heading); font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.18; text-wrap: pretty;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- images: washed + rounded ---------- */
.wp-block-image { margin-block: 0; }
.wp-block-image img { filter: saturate(.6) contrast(.85) brightness(1.1) opacity(.94); width: 100%; }
.wp-block-image.is-style-arch img { border-radius: 999px 999px 120px 120px; }
.wp-block-image.is-style-circle img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }

/* ---------- buttons ---------- */
.wp-block-button__link { transition: background-color .15s ease; }
.wp-block-button__link:active { background-color: #9a1b17; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: rgba(32, 30, 29, .07); color: var(--wp--preset--color--ink); }

/* ---------- header ---------- */
.cc-header { padding-block: 12px; position: relative; z-index: 20; }
.cc-header-inner { gap: 24px; }
.cc-brand { gap: 12px; min-width: 0; }
.cc-logo { display: block; flex: none; line-height: 0; }
.cc-logo img { height: 50px; width: auto; }
.cc-brand-text { gap: 5px; }
.cc-brand .wp-block-site-title { font-family: var(--wp--preset--font-family--heading); font-size: clamp(22px, 3vw, 32px); line-height: 1; margin: 0; white-space: nowrap; }
.cc-brand .wp-block-site-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.cc-brand .wp-block-site-tagline { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0; }
.cc-header-right { gap: 32px; }
.cc-nav { font-size: 15px; gap: 32px; }
.cc-nav a { color: var(--wp--preset--color--ink); text-decoration: none; }
.cc-nav a:hover { color: var(--wp--preset--color--red-dark); }
.cc-nav .current-menu-item > a { position: relative; }
.cc-nav .current-menu-item > a::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--wp--preset--color--red);
}
.cc-header-call .wp-block-button__link { padding: 11px 22px; font-size: 14px; }
/* mobile menu overlay */
.cc-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--cream) !important; color: var(--wp--preset--color--ink) !important;
  padding: 20px clamp(20px, 6vw, 40px) 40px !important;
}
.cc-nav .is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: stretch !important; padding-top: 72px !important;
}
.cc-nav .is-menu-open .wp-block-navigation__container {
  align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; width: 100%;
}
.cc-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--cc-divider); }
.cc-nav .is-menu-open .wp-block-navigation-item:first-child { border-top: 1px solid var(--cc-divider); }
.cc-nav .is-menu-open .wp-block-navigation-item__content {
  display: block; width: 100%; padding: 16px 0 !important; text-align: left;
  font-family: var(--wp--preset--font-family--heading); font-size: 32px; line-height: 1.1;
  color: var(--wp--preset--color--ink) !important;
}
.cc-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--red-dark) !important; }
.cc-nav .is-menu-open .current-menu-item > a::after { display: none; }
.cc-nav .wp-block-navigation-item__content:focus { outline: none; }
.cc-nav .wp-block-navigation-item__content:focus-visible { outline: 2px solid var(--wp--preset--color--terracotta); outline-offset: 4px; border-radius: 8px; }
.cc-nav .wp-block-navigation__responsive-container-close {
  top: 16px !important; right: clamp(20px, 6vw, 40px) !important; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--ink);
}
.cc-nav .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; }
/* hamburger menu up to 959px; phone number becomes a round phone icon */
@media (max-width: 959px) {
  .cc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .cc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  .cc-header .cc-header-right { gap: 12px; }
  .cc-header .cc-header-call { order: -1; flex: none; }
  .cc-header .cc-header-call .wp-block-button__link {
    width: 44px; height: 44px; padding: 0 !important; border-radius: 50%;
    display: grid; place-items: center; font-size: 0 !important; line-height: 0; white-space: nowrap; overflow: hidden;
  }
  .cc-header .cc-header-call .wp-block-button__link::before {
    content: ""; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .cc-nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; display: grid; place-items: center; }
  .cc-nav .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; }
}
@media (max-width: 480px) {
  .cc-brand .wp-block-site-tagline { display: none; }
  .cc-brand .wp-block-site-title { font-size: 20px; }
  .cc-logo img { height: 36px; }
  .cc-brand { gap: 10px; }
  .cc-header-inner { gap: 10px; }
  .cc-header .cc-header-right { gap: 6px; }
}

/* ---------- home hero ---------- */
.cc-hero { gap: clamp(36px, 6vw, 80px); }
.cc-portrait { position: relative; }
.cc-since {
  position: absolute; right: 8px; bottom: 28px; width: 104px; height: 104px; margin: 0;
  border-radius: 50%; background: var(--wp--preset--color--red); color: var(--wp--preset--color--white-warm);
  display: grid; place-items: center; text-align: center;
  font-family: var(--wp--preset--font-family--heading); font-size: 17px; line-height: 1.1;
  box-shadow: 0 3px 10px rgba(46, 43, 37, .16);
}

/* ---------- bands ---------- */
.cc-band-sage { background: var(--wp--preset--color--sage-dark); color: var(--wp--preset--color--cream); }
.cc-band-sage .cc-kicker { color: var(--wp--preset--color--sage-light); }
.cc-band-sage .cc-note { color: #e1eecc; }
.cc-band-sage a:not(.wp-block-button__link) { color: var(--wp--preset--color--cream); }
.cc-band-sage .is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--cream); border-color: rgba(245, 234, 216, .4); }
.cc-band-sage .is-style-outline > .wp-block-button__link:hover { background: rgba(245, 234, 216, .1); color: var(--wp--preset--color--cream); }
.cc-band-sand { background: var(--wp--preset--color--sand); }
.cc-cols { gap: clamp(36px, 5vw, 72px); }

/* ---------- live hours ---------- */
.cc-status {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px;
  background: var(--wp--preset--color--sand); font-size: 14px; line-height: 1.3;
}
.cc-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--wp--preset--color--muted); }
.cc-status.is-open::before { background: var(--wp--preset--color--sage); }
.cc-status.is-closed::before { background: var(--wp--preset--color--red); }
.cc-band-sage .cc-status { background: rgba(245, 234, 216, .12); }
.cc-band-sage .cc-status.is-open::before { background: var(--wp--preset--color--sage-light); }
.cc-band-sage .cc-status.is-closed::before { background: #ff6a5e; }
.cc-hours { max-width: 460px; }
.cc-hours > * { margin-block: 0; }
.cc-hours-row { padding: 13px 0; border-bottom: 1px solid var(--cc-divider); gap: 16px; }
.cc-hours-row p { margin: 0; }
.cc-hours-row p:last-child { font-variant-numeric: tabular-nums; }
.cc-band-sage .cc-hours-row { border-color: var(--cc-divider-dark); }
.cc-hours .cc-note { margin-top: 12px; }
.cc-today {
  display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; vertical-align: 2px;
  font-size: 11px; line-height: 1.4; background: var(--wp--preset--color--red); color: var(--wp--preset--color--white-warm);
}

/* ---------- gallery ---------- */
.cc-gallery { gap: 16px; }
.cc-gallery .wp-block-column { display: flex; flex-direction: column; gap: 16px; }
.cc-gallery .wp-block-image img { border-radius: 22px; }

/* ---------- about: timeline ---------- */
@media (min-width: 782px) { .cc-sticky { position: sticky; top: 24px; } }
.cc-steps > * { margin-block: 0; }
.cc-step {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(16px, 3vw, 28px);
  padding: 28px 0; border-top: 1px solid var(--cc-divider);
}
.cc-step:last-child { border-bottom: 1px solid var(--cc-divider); }
.cc-step > .wp-block-group > * { margin-block: 0 8px; }
.cc-step .cc-kicker { margin-bottom: 6px; }
.cc-num {
  width: 56px; height: 56px; margin: 0; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--wp--preset--font-family--heading); font-size: 22px; line-height: 1;
  background: var(--wp--preset--color--red); color: #fff;
}
.cc-num-sage { background: var(--wp--preset--color--sage); }
.cc-num-terra { background: var(--wp--preset--color--terracotta); }
.cc-num-dark { background: var(--wp--preset--color--sage-dark); }

/* ---------- about: cards ---------- */
.cc-cards { gap: 20px; }
.cc-card { border-radius: 32px; padding: 28px; background: var(--wp--preset--color--sand); }
.cc-card > * { margin-block: 0 10px; }
.cc-card::before { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; margin-bottom: 14px; background: var(--wp--preset--color--ink); }
.cc-card-sage { background: var(--wp--preset--color--sage-tint); }
.cc-card-sage::before { background: var(--wp--preset--color--sage); }
.cc-card-red { background: var(--wp--preset--color--red-tint); }
.cc-card-red::before { background: var(--wp--preset--color--red); }
.cc-card-terra { background: var(--wp--preset--color--terracotta-tint); }
.cc-card-terra::before { background: var(--wp--preset--color--terracotta); }
.cc-image-row { gap: 16px; margin-top: 36px; }
.cc-image-row .wp-block-image img { border-radius: 22px; }

/* ---------- CTA panel ---------- */
.cc-cta { border-radius: var(--cc-radius); padding: clamp(28px, 4vw, 48px); background: var(--wp--preset--color--sage-dark); color: var(--wp--preset--color--cream); gap: 24px 40px; }
.cc-cta > * { margin: 0; }
.cc-cta p { color: #e1eecc; }
.cc-cta .is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--cream); border-color: rgba(245, 234, 216, .4); }

/* ---------- contact ---------- */
.cc-details > * { margin-block: 0; }
.cc-details h4 { margin-top: 28px; margin-bottom: 6px; }
.cc-details .wp-block-buttons { margin-top: 12px; }
.cc-details .wp-block-button__link { padding: 12px 22px; font-size: 14.5px; }
.cc-form-card { background: var(--wp--preset--color--sand); border-radius: var(--cc-radius); padding: clamp(24px, 4vw, 44px); }
.cc-avatar-row { gap: 16px; margin-bottom: 24px; }
.cc-avatar-row > .wp-block-group > * { margin: 0 0 4px; }
.cc-avatar { width: 64px; flex: none; }
.cc-map iframe {
  display: block; width: 100%; height: clamp(280px, 34vw, 420px); border: 0; border-radius: var(--cc-radius);
  filter: saturate(.6) contrast(.9) brightness(1.05);
}

/* ---------- footer ---------- */
.cc-footer { background: var(--wp--preset--color--sand); padding-top: 52px; }
.cc-footer-cols { gap: 36px; }
.cc-footer-cols p { font-size: 14px; line-height: 1.7; color: var(--wp--preset--color--ink-soft); margin: 0 0 10px; }
.cc-footer-cols h4 { margin: 0 0 10px; font-size: 17px; }
.cc-footer .cc-logo img { height: auto; width: 120px; }
.cc-footer-brand { font-family: var(--wp--preset--font-family--heading); font-size: 19px !important; color: var(--wp--preset--color--ink) !important; margin-top: 12px !important; }
.cc-footer-bottom { border-top: 1px solid var(--cc-divider); padding: 18px 0 30px; margin-top: 32px; gap: 12px 24px; font-size: 12.5px; color: var(--wp--preset--color--muted); }
.cc-footer-bottom p { margin: 0; }
.cc-footer-bottom a { color: inherit; margin-left: 18px; }
.cc-footer-bottom a:first-child { margin-left: 0; }

/* ---------- Forminator (set the form's Design Style to "None") ---------- */
.forminator-ui.forminator-custom-form .forminator-row { margin-bottom: 16px; }
.forminator-ui.forminator-custom-form .forminator-label { display: block; font-size: 12px; margin-bottom: 5px; color: var(--wp--preset--color--muted); }
.forminator-ui.forminator-custom-form input.forminator-input,
.forminator-ui.forminator-custom-form textarea.forminator-textarea {
  width: 100%; min-height: 46px; padding: 10px 16px; box-sizing: border-box;
  border: 1px solid var(--cc-divider); border-radius: 999px; background: var(--wp--preset--color--cream);
  font: inherit; font-size: 15px; color: var(--wp--preset--color--ink);
}
.forminator-ui.forminator-custom-form textarea.forminator-textarea { border-radius: 16px; min-height: 140px; padding: 12px 16px; }
.forminator-ui.forminator-custom-form input.forminator-input:focus,
.forminator-ui.forminator-custom-form textarea.forminator-textarea:focus { outline: 2px solid var(--wp--preset--color--terracotta); outline-offset: 0; border-color: transparent; }
.forminator-ui.forminator-custom-form .forminator-button-submit {
  width: 100%; padding: 15px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--wp--preset--color--red); color: var(--wp--preset--color--white-warm);
  font-family: var(--wp--preset--font-family--body); font-size: 15px; font-weight: 600;
}
.forminator-ui.forminator-custom-form .forminator-button-submit:hover { background: var(--wp--preset--color--red-dark); }

/* ---------- back to top (sits above the corner, leaving room for a chat widget) ---------- */
.cc-to-top {
  position: fixed; right: clamp(16px, 3vw, 24px); bottom: 104px; z-index: 50;
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font: 600 22px/1 var(--wp--preset--font-family--body);
  background: var(--wp--preset--color--sage-dark); color: var(--wp--preset--color--cream);
  box-shadow: 0 3px 10px rgba(46, 43, 37, .16);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .15s ease;
}
.cc-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.cc-to-top:hover { background: #272e1b; }
.cc-to-top:focus-visible { outline: 2px solid var(--wp--preset--color--terracotta); outline-offset: 2px; }

/* ---------- subtle motion (only for visitors who haven't asked for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cc-motion .cc-reveal {
    opacity: 0;
    transition: opacity 1.4s ease var(--cc-d, 0ms);
  }
  .cc-motion .cc-reveal.is-in { opacity: 1; }

  .cc-gallery .wp-block-image, .cc-image-row .wp-block-image { overflow: hidden; border-radius: 22px; }
  .cc-gallery .wp-block-image img, .cc-image-row .wp-block-image img { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
  .cc-gallery .wp-block-image:hover img, .cc-image-row .wp-block-image:hover img { transform: scale(1.035); }

  .wp-block-button__link { transition: background-color .15s ease, transform .25s ease, box-shadow .25s ease; }
  .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(46, 43, 37, .35); }
  .wp-block-button__link:active { transform: none; box-shadow: none; }
  .cc-to-top:hover { transform: translateY(-2px); }

  .cc-status.is-open::before { animation: cc-pulse 2.8s ease-out infinite; }
  .cc-band-sage .cc-status.is-open::before { animation-name: cc-pulse-light; }
}
@keyframes cc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(114, 129, 87, .5); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(114, 129, 87, 0); }
}
@keyframes cc-pulse-light {
  0% { box-shadow: 0 0 0 0 rgba(204, 219, 178, .55); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(204, 219, 178, 0); }
}

/* ---------- responsive ---------- */
/* in the editor, let clicks select the map block instead of panning the map */
.editor-styles-wrapper .cc-map iframe { pointer-events: none; }
.editor-styles-wrapper .cc-map { outline: 1px dashed rgba(32, 30, 29, .25); border-radius: var(--cc-radius); }
.cc-hours .cc-hours-row { flex-wrap: wrap; row-gap: 4px; }

/* two-column sections stack below 960px (tablets), not just on phones */
@media (max-width: 959px) {
  .wp-block-columns.cc-hero,
  .wp-block-columns.cc-cols { flex-wrap: wrap !important; }
  .wp-block-columns.cc-hero > .wp-block-column,
  .wp-block-columns.cc-cols > .wp-block-column { flex-basis: 100% !important; }
  .cc-portrait { max-width: 440px; }
  .cc-hero .wp-block-image,
  .cc-cols .wp-block-image { max-width: 560px; }
  .cc-sticky { position: static; }
  .cc-form-card { max-width: 640px; }
}

/* gallery: tidy two-up grid on phones instead of one long column */
@media (max-width: 781px) {
  .wp-block-columns.cc-gallery { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cc-gallery > .wp-block-column { display: contents; }
  .cc-gallery .wp-block-image img { aspect-ratio: 1 !important; border-radius: 18px; }
  .cc-gallery > .wp-block-column:last-child > .wp-block-image:last-child { grid-column: span 2; }
  .cc-gallery > .wp-block-column:last-child > .wp-block-image:last-child img { aspect-ratio: 2 / 1 !important; }
}

/* footer: 2 × 2 on tablets, single column on small phones */
@media (max-width: 1023px) {
  .wp-block-columns.cc-footer-cols { flex-wrap: wrap !important; }
  .wp-block-columns.cc-footer-cols > .wp-block-column { flex-basis: calc(50% - 18px) !important; flex-grow: 0; }
}
@media (max-width: 480px) {
  .wp-block-columns.cc-footer-cols > .wp-block-column { flex-basis: 100% !important; }
  .cc-since { width: 86px; height: 86px; font-size: 15px; bottom: 20px; }
  .cc-section { padding-block: 48px; }
  .cc-section.cc-tight-top { padding-top: 0; }
  .cc-section.cc-hero-section { padding-top: 16px; }
}