/* =====================================================================
   SOLIDLINES — EASY ADJUSTMENTS
   Edit this file in cPanel: public_html/assets/custom.css
   This file loads LAST, so you do not need to edit the larger site.css.
   Keep the property names, colons, semicolons and units (px) unchanged.
   Change ONE value, save, then check desktop + mobile before changing more.
   Local builds preserve this file. Keep a backup before uploading a new ZIP.
   ===================================================================== */
:root {
  /* HEADER HEIGHT (minimum height, not a fixed crop).
     Example: change 80px to 96px for a taller desktop header.
     If a very large logo needs extra space, the header can grow naturally. */
  --header-height-desktop: 80px;
  --header-height-mobile: 76px;

  /* LOGO WIDTHS. Height stays proportional automatically.
     Example: desktop 200px -> 180px makes the logo smaller.
     Keep mobile widths modest so the search/menu icons still fit. */
  --logo-width-desktop: 200px;
  --logo-width-small-desktop: 170px; /* Screens 801–1100px wide. */
  --logo-width-tablet: 175px;       /* Screens 561–800px wide. */
  --logo-width-mobile: 150px;       /* Screens up to 560px wide. */
  --logo-width-open-menu: 165px;    /* Full-screen mobile menu. */
  --logo-width-small-open-menu: 145px; /* Smallest phones, up to 360px. */
  --logo-width-search-desktop: 160px; /* Search open on 961–1200px screens. */
  --logo-width-footer: 200px;
  --logo-width-footer-mobile: 180px; /* Screens up to 1000px wide. */

  /* GLASS: opacity 0 = transparent, 1 = solid white.
     Example: .48 -> .70 gives a more opaque header.
     Blur 18px -> 12px gives less background blur.
     Grain 0 hides the texture; .035 is deliberately subtle. */
  --header-glass-opacity: .48;
  --header-glass-blur: 18px;
  --header-grain-opacity: .035;

  /* SEARCH: input width only; the icon adds another 44px.
     Keep the normal input at 256px or less for a total under 300px.
     Leave the compact input smaller so desktop links still fit. */
  --search-input-width: 220px;
  --search-input-width-compact: 156px;
  --search-rest-background: #f3f3f3;
  --search-active-background: #fff3e3;
  --search-active-color: #ff9700;

  /* Main accent used by buttons, markers and other variable-based accents.
     Some supporting tints are intentionally defined in site.css. */
  --color-accent: #ff9700;
}

/* Implementation below uses your values above. Usually leave it alone. */
:root { --header-offset: calc(var(--header-height-desktop) + 8px); }
.header-inner { min-height: var(--header-height-desktop); }
.site-header {
  background: rgba(255,255,255,var(--header-glass-opacity));
  backdrop-filter: blur(var(--header-glass-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--header-glass-blur)) saturate(120%);
}
.site-header:before { opacity: var(--header-grain-opacity); }
.logo img { width: var(--logo-width-desktop); }
.footer-logo { width: var(--logo-width-footer); }
.search-toggle { background: var(--search-rest-background); }
.header-search,
.search-toggle:hover,
.search-toggle:focus-visible,
.search-open .search-toggle { background: var(--search-active-background); }
.search-toggle:hover,
.search-toggle:focus-visible,
.search-open .search-toggle { color: var(--search-active-color); }
.search-open .header-search {
  flex-basis: var(--search-input-width);
  width: var(--search-input-width);
  max-width: var(--search-input-width);
}
@media (max-width:1100px) { .logo img { width:var(--logo-width-small-desktop); } }
@media (max-width:1000px) { .footer-logo { width:var(--logo-width-footer-mobile); } }
@media (max-width:960px) {
  :root { --header-offset:calc(var(--header-height-mobile) + 8px); }
  .header-inner { min-height:var(--header-height-mobile); }
  .mobile-menu-open .logo img { width:var(--logo-width-open-menu); }
  /* Keeps the menu below the top controls when you change mobile height. */
  .mobile-menu-open .site-header .site-nav.is-open { top:calc(var(--header-height-mobile) + 2px); }
  .mobile-menu-open .search-toggle { background:var(--search-rest-background); }
  .mobile-menu-open .search-toggle:hover { background:var(--search-active-background);color:var(--search-active-color); }
  /* A full-screen menu stays opaque so its links remain readable. */
  .mobile-menu-open .site-header:before { opacity:calc(var(--header-grain-opacity) * .57); }
}
@media (max-width:800px) { .logo img { width:var(--logo-width-tablet); } }
@media (max-width:560px) { .logo img { width:var(--logo-width-mobile); } }
@media (max-width:360px) { .mobile-menu-open .logo img { width:var(--logo-width-small-open-menu); } }
@media (min-width:961px) and (max-width:1200px) {
  .search-open .logo img { width:var(--logo-width-search-desktop); }
  .search-open .header-search {
    flex-basis:var(--search-input-width-compact);
    width:var(--search-input-width-compact);
    max-width:var(--search-input-width-compact);
  }
}
/* Readable fallback for browsers without glass/blur support. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .site-header { background:rgba(255,255,255,.94); }
}