/*
Theme Name:   Sarasota Glass Child
Theme URI:    https://sarasotaglass.com
Description:  Lean GeneratePress child theme for Sarasota Glass & Mirror. Owns the global shell only — brand colors, typography, header/footer, and tracking hooks. All page and post content is built in the editor with GenerateBlocks; nothing page-specific belongs in this theme.
Author:       The Web Design Ninja
Author URI:   https://thewebdesignninja.com
Template:     generatepress
Version:      1.9.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sarasotaglass-child
*/

/* =========================================================================
   1. BRAND TOKENS
   Single source of truth for the brand. Change a value here (or in
   theme.json / the GeneratePress Customizer) and it updates site-wide.
   ========================================================================= */
:root {
  /* Purple family */
  --sg-purple:        #8c4bcc; /* primary UI purple: utility bar, buttons, active nav */
  --sg-purple-dark:   #603090; /* deep logo purple: headings accents, hovers */
  --sg-purple-darker: #4d2673; /* button/link hover */

  /* Gold accent (logo swoosh) */
  --sg-gold:          #f0c000;
  --sg-gold-dark:     #cca300;

  /* Neutrals */
  --sg-ink:           #212121; /* headings */
  --sg-body:          #404040; /* body text */
  --sg-muted:         #6b6b6b;
  --sg-line:          #e4e4e4;
  --sg-bg:            #ffffff;
  --sg-bg-alt:        #f4f4f4; /* light section background */
  --sg-bg-alt2:       #f7f7f7;

  /* Feedback */
  --sg-red:           #e80000; /* required/urgency */

  /* Type */
  --sg-font-head: "Source Sans Pro", "Source Sans 3", system-ui, sans-serif;
  --sg-font-body: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Radius / spacing */
  --sg-radius: 4px;
  --sg-radius-lg: 8px;
}

/* =========================================================================
   2. BASE TYPOGRAPHY
   (GeneratePress also sets these via the Customizer; these ensure the
   brand fonts/colors apply even before the Customizer is touched.)
   ========================================================================= */
body {
  font-family: var(--sg-font-body);
  color: var(--sg-body);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
  font-family: var(--sg-font-head);
  color: var(--sg-ink);
  font-weight: 700;
  line-height: 1.15;
}

h1 { font-size: clamp(2.25rem, 4vw + 1rem, 4.4rem); }
h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); }
h3 { font-size: 1.5rem; font-weight: 600; }

a { color: var(--sg-purple); }
a:hover, a:focus { color: var(--sg-purple-darker); }

/* =========================================================================
   3. BUTTONS
   Applies to GenerateBlocks buttons (.gb-button), core buttons, WooCommerce
   buttons, and Ninja Forms submit — one consistent brand button.
   ========================================================================= */
.wp-block-button__link,
.gb-button,
button.button,
.button,
input[type="submit"],
.wp-block-search__button,
.woocommerce a.button,
.woocommerce button.button,
.nf-form-content input[type="button"],
.nf-form-content .submit-wrap input {
  background-color: var(--sg-purple);
  color: #fff;
  border: 0;
  border-radius: var(--sg-radius);
  padding: 14px 30px;
  font-family: var(--sg-font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  transition: background-color .15s ease, transform .05s ease;
  cursor: pointer;
}

.wp-block-button__link:hover,
.gb-button:hover,
button.button:hover,
.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.nf-form-content input[type="button"]:hover {
  background-color: var(--sg-purple-darker);
  color: #fff;
}

/* Secondary / gold button — add class .is-style-gold or .sg-btn-gold */
.sg-btn-gold,
.is-style-gold > .wp-block-button__link {
  background-color: var(--sg-gold);
  color: var(--sg-ink);
}
.sg-btn-gold:hover,
.is-style-gold > .wp-block-button__link:hover {
  background-color: var(--sg-gold-dark);
  color: var(--sg-ink);
}

/* Outline button — .sg-btn-outline OR the "Outline" block style */
.sg-btn-outline,
.is-style-outline-purple > .wp-block-button__link {
  background: transparent;
  color: var(--sg-purple);
  box-shadow: inset 0 0 0 2px var(--sg-purple);
}
.sg-btn-outline:hover,
.is-style-outline-purple > .wp-block-button__link:hover { background: var(--sg-purple); color: #fff; }

/* =========================================================================
   4. HEADER — top utility bar + main nav
   The utility bar (showroom names + phones) sits above the logo/nav.
   Build it as a GeneratePress "Header" or a Hook Element into
   generate_before_header; these styles target it via .sg-topbar.
   ========================================================================= */
.sg-topbar {
  background: var(--sg-purple);
  color: #fff;
  font-family: var(--sg-font-body);
  font-size: .95rem;
  font-weight: 600;
}
.sg-topbar a { color: #fff; text-decoration: none; }
.sg-topbar a:hover { color: var(--sg-gold); }
.sg-topbar .sg-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 8px 0;
  flex-wrap: wrap;
}
.sg-topbar-item { white-space: nowrap; }
.sg-topbar-social { margin-left: auto; }
@media (max-width: 768px) {
  .sg-topbar { font-size: .85rem; }
  .sg-topbar .sg-topbar-inner { justify-content: center; gap: .35rem 1rem; }
  .sg-topbar-social { margin-left: 0; }
}

/* Logo sizing — the round "50 Years" mark */
.site-header .site-logo img,
.site-header .header-image,
.inside-header .site-logo img {
  max-height: 84px;
  width: auto;
}
@media (max-width: 768px) {
  .site-header .site-logo img,
  .site-header .header-image { max-height: 64px; }
}

/* We use the logo image, so hide the text title/tagline in the header */
.site-header .main-title,
.site-header .site-description { position: absolute; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; }

/* Header layout is handled by GeneratePress' native nav-float-right; just
   vertically center the logo and nav on the same line. Do NOT set the header
   to display:flex here — it breaks GeneratePress' float layout and wraps the
   nav onto a second row. */
.inside-header { align-items: center; }
.site-header .main-navigation { display: flex; align-items: center; }

/* Primary navigation — active/current item gets a purple pill (matches live site) */
.main-navigation .main-nav ul li a { white-space: nowrap; }
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  background-color: var(--sg-purple);
  color: #fff;
  border-radius: var(--sg-radius);
}
.main-navigation .main-nav ul li a { font-family: var(--sg-font-body); font-weight: 600; }
.main-navigation .main-nav ul li a:hover { color: var(--sg-purple); }

/* =========================================================================
   5. SECTIONS / UTILITY HELPERS for GenerateBlocks patterns
   ========================================================================= */
.sg-section-alt { background: var(--sg-bg-alt); }
.sg-eyebrow {
  font-family: var(--sg-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sg-purple);
  font-size: .8rem;
}
.sg-gold-rule { height: 4px; width: 64px; background: var(--sg-gold); border: 0; margin: 1rem 0; }

/* Service cards */
.sg-card {
  background: #fff;
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius-lg);
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.sg-card:hover { box-shadow: 0 10px 30px rgba(96,48,144,.12); transform: translateY(-2px); }

/* Page-building utility classes (keep block markup lean & reusable across pages) */
.sg-sec { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.sg-sec-sm { padding-top: 1rem; padding-bottom: 1rem; }
.sg-card .sg-card-body, .sg-card-body { padding: 1rem 1.25rem 1.25rem; }
.sg-card-pad { padding: 1.5rem; }
.sg-hero .wp-block-cover__inner-container { width: 100%; }
.sg-hero { min-height: 520px; }
.sg-badges { gap: 2rem; align-items: center; }
.sg-badges img { max-height: 84px; width: auto; }

/* Hide the theme page-title on all static pages — each rebuilt page carries
   its own hero H1. (Blog posts and WooCommerce templates are unaffected.) */
.page .entry-header, .page .page-header { display: none; }
.page .entry-content { margin-top: 0; }
/* Full-width heroes sit flush under the nav (remove container top gap) */
.page .site-main { margin-top: 0; }
.page .inside-article { padding-top: 0; border-radius: 0; }

/* Blog & posts — readable reading column */
.single-post .inside-article,
.blog .site-main article .inside-article,
.archive .site-main article .inside-article {
  max-width: 800px; margin-left: auto; margin-right: auto;
  background: #fff; border: 1px solid var(--sg-line); border-radius: var(--sg-radius-lg);
  padding: 2rem; margin-bottom: 2rem;
}
.single-post .entry-title, .blog .entry-title, .archive .entry-title { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.blog .entry-title a, .archive .entry-title a { color: var(--sg-ink); }
.blog .entry-title a:hover, .archive .entry-title a:hover { color: var(--sg-purple); }
.single-post .entry-content { font-size: 1.06rem; }
.single-post .entry-content p, .single-post .entry-content li { margin-bottom: 1.15rem; line-height: 1.7; }
.single-post .entry-content h2 { margin-top: 2rem; }
.entry-meta { color: var(--sg-muted); font-size: .9rem; }
.blog .site-main, .archive .site-main { padding-top: 2rem; }
.wp-block-columns { align-items: stretch; }
.sg-card { display: flex; flex-direction: column; }
.sg-card > .wp-block-image { margin: 0; }
.sg-card > .wp-block-image img { width: 100%; height: 210px; object-fit: cover; display: block; }
.sg-card .sg-card-body { flex: 1 1 auto; }

/* Full-width, no-sidebar layout (block section designs are full-width).
   Also enforced in PHP via the generate_sidebar_layout filter; this CSS is
   the belt-and-braces so full-bleed sections break out even if a page is
   still on a sidebar layout. */
#right-sidebar, #left-sidebar { display: none !important; }
.site-content .content-area { width: 100% !important; }
.entry-content .alignfull {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
.entry-content > .alignfull:first-child { margin-top: 0; }

/* =========================================================================
   6. FOOTER
   ========================================================================= */
.site-footer, .sg-footer {
  background: var(--sg-ink);
  color: #cfcfcf;
}
.sg-footer { padding: 3rem 0; font-family: var(--sg-font-body); }
.sg-footer a { color: #fff; text-decoration: none; }
.sg-footer a:hover { color: var(--sg-gold); }
.sg-footer h4 {
  color: #fff;
  font-family: var(--sg-font-head);
  font-size: 1.1rem;
  margin: 0 0 .75rem;
}
.sg-footer p { margin: 0 0 .75rem; line-height: 1.6; }
.sg-footer .sg-muted { color: #9a9a9a; font-size: .9rem; }
.sg-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
}
.sg-footer-links { list-style: none; margin: 0; padding: 0; }
.sg-footer-links li { margin: 0 0 .4rem; }
@media (max-width: 880px) {
  .sg-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (max-width: 500px) {
  .sg-footer-grid { grid-template-columns: 1fr; }
}
.site-info {
  background: #171717;
  color: #9a9a9a;
  text-align: center;
  padding: 1rem 0;
  font-size: .9rem;
}
.site-info a { color: #cfcfcf; text-decoration: none; }
.site-info a:hover { color: var(--sg-gold); }

/* =========================================================================
   7. FORMS (Ninja Forms "Get a Quote")
   ========================================================================= */
.nf-form-content input:not([type=button]),
.nf-form-content textarea,
.nf-form-content select {
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-radius);
}
.nf-form-content .nf-field-label .required, .ninja-forms-req-symbol { color: var(--sg-red); }

/* =========================================================================
   8. ACCESSIBILITY
   ========================================================================= */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--sg-gold);
  outline-offset: 2px;
}