/*
Theme Name: Cafe Pignon
Theme URI: https://cafepignon.com
Description: Cafe Pignon brand theme. Astra child carrying the palette, type pairing and header
  lockup from the original SvelteKit build, so the WordPress + WooCommerce store keeps the look it
  launched with.
Author: Trident / Zakley
Version: 1.0.8
Template: astra
*/

/* --- Brand tokens, read from the original build's compiled CSS (capture 2026-09-26) --- */
:root {
  --color-coffee:       #3c1518;
  --color-coffee-dark:  #2a0e10;
  --color-coffee-light: #5c2a2e;
  --color-cream:        #f5f0e8;
  --color-cream-dark:   #e8e0d0;
  --color-gold:         #c1975c;
  --color-gold-dark:    #a67d42;
  --color-gold-light:   #d4b07a;
  --color-green:        #2d5016;
  --color-green-dark:   #1e3a0e;
  --color-warm-gray:       #6b5e54;
  --color-warm-gray-light: #9b8e84;
  --color-dark:         #1a1a1a;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-heading: "Playfair Display", Georgia, serif;
  --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem;
}

body, button, input, select, textarea { font-family: var(--font-body); color: var(--color-dark); }
body { background: var(--color-cream); }
h1, h2, h3, h4, h5, h6,
.entry-title, .woocommerce-loop-product__title, .product_title { font-family: var(--font-heading); }

/* Colour is scoped AWAY from the imported pages. Those carry the original build's own markup and
   its stylesheet already colours them -- a bare `h1 { color }` here is applied directly and so
   beats his INHERITED `text-cream`, which is what turned the hero headline dark on a dark hero. */
body:not(.cafepignon-legacy) h1, body:not(.cafepignon-legacy) h2,
body:not(.cafepignon-legacy) h3, body:not(.cafepignon-legacy) h4,
body:not(.cafepignon-legacy) h5, body:not(.cafepignon-legacy) h6,
.entry-title, .woocommerce-loop-product__title, .product_title { color: var(--color-coffee); }
body:not(.cafepignon-legacy) a { color: var(--color-coffee); }
body:not(.cafepignon-legacy) a:hover, body:not(.cafepignon-legacy) a:focus { color: var(--color-gold-dark); }

/* Astra applies its own heading colour (#1e293b) directly to h1..h6. A directly-matched rule
   always beats an INHERITED one, so his headings -- which carry no colour class of their own and
   inherit `text-cream` from their section -- came out slate on a dark hero. Restoring inheritance
   on the imported pages hands the colour decision back to his own utilities, exactly as his
   original cascade intended. */
.cafepignon-legacy main h1, .cafepignon-legacy main h2, .cafepignon-legacy main h3,
.cafepignon-legacy main h4, .cafepignon-legacy main h5, .cafepignon-legacy main h6 { color: inherit; }

/* Astra underlines content links; the original design does not. */
.cafepignon-legacy main a,
.cafepignon-legacy main a:hover { text-decoration: none !important; }

/* ---------------------------------------------------------------------------
   HEADER — reproduces the original lockup:
     [CP tile]  Cafe Pignon
                HAITI
   The tile is a ::before on the site-title link, the "HAITI" line is the site
   tagline. Both are stock WordPress pieces, so nothing here depends on Astra
   internals and the whole thing travels with the site if it changes hands.
   The original header is CREAM with a hairline bottom border, and sticky.
--------------------------------------------------------------------------- */
.site-header, .ast-primary-header-bar, .ast-above-header, .main-header-bar {
  background: rgba(245, 240, 232, .95) !important;
  border-bottom: 1px solid var(--color-cream-dark);
  backdrop-filter: blur(4px);
}
.ast-primary-header-bar { position: sticky; top: 0; z-index: 50; }

/* the brand block: tile + stacked wordmark */
.site-branding .site-title { margin: 0; line-height: 1.1; }
.site-branding .site-title a {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: .75rem;
  align-items: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -.01em; color: var(--color-coffee); text-decoration: none;
}
/* the HAITI sub-label. Astra's Header Builder does not output .site-description at all, so the
   line is rendered from the title link rather than relying on the tagline element existing. */
.site-branding .site-title a::after {
  content: "Haiti";
  grid-column: 2; grid-row: 2;
  font-family: var(--font-body); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .2em;
  color: var(--color-warm-gray); line-height: 1.2; margin-top: .1rem;
}
.site-branding .site-title a::before {
  content: "CP";
  grid-column: 1; grid-row: 1 / span 2;
  width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-coffee); color: var(--color-gold);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem;
  letter-spacing: 0;
}
.site-branding .site-title a:hover { color: var(--color-coffee); }

/* the small HAITI line, sitting under the wordmark and aligned past the tile */
.site-branding .site-description {
  margin: -.35rem 0 0 3.25rem;
  font-family: var(--font-body); font-size: .75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--color-warm-gray);
}

/* nav: small uppercase warm-grey, coffee on hover, as in the original */
.main-header-menu > li > a, .ast-builder-menu a, .main-navigation a {
  color: var(--color-warm-gray) !important;
  font-family: var(--font-body); font-size: .8125rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
}
.main-header-menu > li > a:hover, .ast-builder-menu a:hover, .main-navigation a:hover {
  color: var(--color-coffee) !important;
}
.ast-mobile-menu-trigger-minimal, .menu-toggle { color: var(--color-coffee) !important; }

/* footer stays dark, as in the original */
.site-footer, .ast-footer-overlay, footer.site-footer {
  background: var(--color-coffee-dark); color: var(--color-cream);
}
.site-footer a { color: var(--color-gold-light); }

/* ---------------------------------------------------------------------------
   IMPORTED PAGES — let his design own the canvas.
   Astra wraps content in its own container with a grey-blue background, and on single posts it
   prints its own byline and date above the content. His posts already carry CATEGORY | DATE |
   read-time in their hero, so Astra's version is both duplicated and wrong (it showed the import
   date, not the real publication date).
--------------------------------------------------------------------------- */
.cafepignon-legacy .site-content,
.cafepignon-legacy #content,
.cafepignon-legacy .ast-container,
.cafepignon-legacy .site-primary-content,
.cafepignon-legacy .ast-separate-container { background: var(--color-cream); }
.cafepignon-legacy .site-content .ast-container,
.cafepignon-legacy .entry-content { padding-left: 0; padding-right: 0; max-width: none; }
.cafepignon-legacy .entry-header,
.cafepignon-legacy .ast-single-post .entry-meta,
.cafepignon-legacy .post-navigation,
.cafepignon-legacy .ast-author-details { display: none; }

/* ---------------------------------------------------------------------------
   WooCommerce — brand the store furniture. Deliberately scoped to .woocommerce
   so these rules cannot reach the imported pages, whose own stylesheet owns them.
--------------------------------------------------------------------------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
  background: var(--color-coffee); color: var(--color-cream);
  border: 0; border-radius: var(--radius-lg); font-family: var(--font-body); font-weight: 600;
  padding: .75rem 1.5rem; transition: background .15s cubic-bezier(.4,0,.2,1);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
  background: var(--color-gold-dark); color: #fff;
}
.woocommerce ul.products li.product { background: #fff; border-radius: var(--radius-xl); padding: 0 0 1.25rem; overflow: hidden; }
.woocommerce ul.products li.product a img { border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin-bottom: 1rem; }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--color-coffee); font-family: var(--font-heading); font-weight: 700; font-size: 1.35rem;
}
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info { border-top-color: var(--color-gold); }
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--color-gold); }
.woocommerce span.onsale { background: var(--color-green); }
.woocommerce-checkout #payment { background: var(--color-cream-dark); border-radius: var(--radius-xl); }
.woocommerce-checkout #payment div.payment_box { background: #fff; }

/* ---------------------------------------------------------------------------
   FOOTER — rebuilt to match the original: brand lockup + blurb, three link
   columns, then Astra's copyright bar carrying the eZakley credit.
--------------------------------------------------------------------------- */
.cp-footer { background: var(--color-coffee-dark); color: var(--color-cream); padding: 3.5rem 1.25rem 2.5rem; }
.cp-footer-inner {
  max-width: 80rem; margin: 0 auto;
  display: grid; gap: 2.5rem;
  grid-template-columns: 2fr 1fr 1fr 1fr;
}
@media (max-width: 900px) { .cp-footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cp-footer-inner { grid-template-columns: 1fr; } }
.cp-footer-brand { display: flex; gap: .85rem; align-items: flex-start; }
.cp-footer-mark {
  flex: 0 0 auto; width: 2.5rem; height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-coffee); color: var(--color-gold);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem;
}
.cp-footer-name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--color-cream); }
.cp-footer-blurb { margin: .5rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--color-warm-gray-light); max-width: 32rem; }
.cp-footer-head {
  font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--color-gold); margin: 0 0 .9rem;
}
.cp-footer-list { list-style: none; margin: 0; padding: 0; }
.cp-footer-list li { margin: 0 0 .55rem; }
.cp-footer-list a { color: var(--color-cream); font-size: .9rem; text-decoration: none; }
.cp-footer-list a:hover { color: var(--color-gold-light); }

/* Astra's copyright bar underneath */
.ast-small-footer, .site-below-footer-wrap, .ast-footer-copyright {
  background: var(--color-coffee-dark) !important; color: var(--color-warm-gray-light);
  border-top: 1px solid rgba(245,240,232,.12);
}
.ast-footer-copyright .cp-copy { display: block; font-size: .8125rem; }
.ast-footer-copyright .cp-powered { display: block; margin-top: .35rem; font-size: .8125rem; }
.ast-footer-copyright a { color: var(--color-gold-light); text-decoration: none; }
.ast-footer-copyright a:hover { color: var(--color-gold); }

/* newsletter signup in the footer */
.cp-news { margin-top: 1.5rem; max-width: 22rem; }
.cp-news .cp-footer-head { margin-bottom: .6rem; }
.cp-news .wpcf7-form { display: block; }
.cp-news .cp-news-label { display: block; }
.cp-news input[type="email"] {
  width: 100%; box-sizing: border-box;
  background: rgba(245,240,232,.08); border: 1px solid rgba(245,240,232,.22);
  color: var(--color-cream); border-radius: var(--radius-lg);
  padding: .6rem .8rem; font-size: .9rem; margin: .25rem 0 .6rem;
}
.cp-news input[type="email"]::placeholder { color: var(--color-warm-gray-light); }
.cp-news input[type="email"]:focus { outline: 2px solid var(--color-gold); outline-offset: 1px; }
.cp-news input[type="submit"] {
  background: var(--color-gold); color: var(--color-coffee-dark);
  border: 0; border-radius: var(--radius-lg); font-weight: 600; font-size: .9rem;
  padding: .6rem 1.4rem; cursor: pointer;
}
.cp-news input[type="submit"]:hover { background: var(--color-gold-light); }
.cp-news-note { margin: .7rem 0 0; font-size: .75rem; color: var(--color-warm-gray-light); }
.cp-news .wpcf7-response-output { color: var(--color-cream); font-size: .8rem; border-color: var(--color-gold) !important; margin: .6rem 0 0; padding: .4rem .6rem; }
.cp-news .wpcf7-not-valid-tip { color: var(--color-gold-light); font-size: .75rem; }