/*
 * SumHours Theme Polish — site-wide responsive CSS only.
 *
 * Scope: GeneratePress chrome (header, footer, page title, section
 * headings, back-to-top) that the SumHours Calculator plugin's own assets
 * deliberately never touch (that plugin only loads on pages carrying its
 * shortcode — see its own assets.php). Every rule below is presentational:
 * no calculation logic, no calculator markup, no schema, no SEO fields, no
 * page-text rewriting.
 *
 * Selectors used (.site-header, .inside-header, .main-title, .entry-header,
 * .entry-title, .entry-content, .site-footer, .footer-widgets, .site-info,
 * .generate-back-to-top, .menu-toggle) are GeneratePress's own long-stable,
 * documented class names — not guessed at. Where a rule must win over an
 * inline style GeneratePress itself may output (the footer's grid column
 * count), !important is used deliberately for that one reason, not as a
 * general specificity shortcut.
 *
 * Every breakpoint below only ever shrinks padding/margins/font-size,
 * reorders/re-columns existing elements, or hides a single attribution
 * link — nothing here can widen an element or introduce horizontal
 * overflow, and nothing here is sticky/fixed except the theme's own
 * pre-existing back-to-top button (which this file only ever hides).
 */

/* ------------------------------------------------------------------ *
 * 1) Header: compact height on phone (~70-80px), minimal/light look
 *    unchanged, not sticky. Also trims the gap between the header and the
 *    page content that follows it.
 *
 *    The mobile menu button's height is forced with an explicit,
 *    *relative* line-height (1.2, not a fixed pixel value) plus a fixed
 *    min-height, both !important. This is deliberate: GeneratePress's own
 *    "Mobile Header Height" Customizer control (Appearance → Customize →
 *    Layout → Header → Mobile Header) sets an absolute line-height on this
 *    exact button — on this site it was set to 60px, which alone pushed
 *    the header to ~108px. A relative override here can't be defeated by
 *    a future edit to that Customizer field the way a plain CSS reset
 *    reasserting a different pixel value could be re-broken by it; 1.2 is
 *    always sane regardless of what absolute number that setting holds.
 *    44px min-height preserves the touch-target requirement independent
 *    of whatever line-height would otherwise compute to.
 *
 *    Deliberately NOT `display: flex` here, even though that's the more
 *    obvious way to center the icon/label inside a shorter button: tested
 *    live, `display: flex` on this exact button causes GeneratePress's own
 *    collapsed mobile nav (#site-navigation) to stop collapsing (it
 *    renders at the button's full height instead of 0 when closed) — a
 *    real, reproducible interaction with this theme's flex/JS toggle
 *    logic, not a hypothetical. The button's native block layout already
 *    centers its icon/label acceptably at this height without flex.
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .site-header .inside-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .main-navigation .menu-toggle {
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
  }
  .page .site-content,
  body.home .site-content {
    margin-top: 0 !important;
    padding-top: 0.25rem !important;
  }
  /* GeneratePress's "separate containers" layout wraps each page's
     content in .inside-article with its own top inset above the title —
     a second source of "space before the H1" independent of the header
     and of .entry-header's own margin/padding (already reset in sections
     3-4 below). Left/right/bottom padding are untouched; only the top
     inset that sits above everything is removed. */
  .inside-article {
    padding-top: 0 !important;
  }
}

/* ------------------------------------------------------------------ *
 * 2) Mobile brand: show "SumHours" instead of the full "sumhours.com"
 *    domain in the header on small screens. The real site title text
 *    stays in the DOM exactly as-is (so its accessible name, and desktop
 *    display, are both unaffected) — only its rendered glyphs are hidden
 *    in favour of a generated label, a standard, reversible CSS-only
 *    technique. Only applies if the theme renders a text title at all;
 *    a site using an uploaded logo image is unaffected (safe no-op).
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .site-header .main-title a {
    font-size: 0;
    line-height: 0;
  }
  .site-header .main-title a::before {
    content: "SumHours";
    display: inline-block;
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: 700;
  }
}

/* ------------------------------------------------------------------ *
 * 3) Homepage hero title: larger, one-line-at-normal-widths treatment,
 *    distinct from the compact inner-page title in section 4 below. Pure
 *    sizing — the text itself ("Add Up Your Hours") is set directly as
 *    real WordPress content; see README.md for the exact edit. Nothing
 *    here generates, wraps or duplicates any text.
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {
  /* margin/padding are both zeroed with !important here because the real
     theme's own spacing above the title could be set as either one — this
     rule needs to win regardless, not stack on top of an unknown value. */
  body.home .entry-header {
    margin: 0 !important;
    padding: 0 0 0.3rem !important;
  }
  body.home .entry-header .entry-title {
    font-size: 2rem; /* ~32px */
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.3rem !important;
  }
  body.home .entry-content > p:first-of-type {
    font-size: 1rem;
    line-height: 1.45;
    margin: 0 0 0.65rem !important;
  }
}

/* ------------------------------------------------------------------ *
 * 4) Inner-page title + intro paragraph: compact on every non-home page
 *    (all five calculator pages, methodology, about, privacy, terms,
 *    contact). Deliberately smaller than the homepage hero above — these
 *    are plain utility titles, not a hero — so the calculator (or the
 *    page's own content) begins noticeably higher. Pure sizing only.
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {
  body:not(.home) .entry-header {
    margin: 0 !important;
    padding: 0 0 0.3rem !important;
  }
  body:not(.home) .entry-header .entry-title {
    font-size: 1.5rem; /* ~24px */
    line-height: 1.25;
    margin: 0 0 0.3rem !important;
  }
  body:not(.home) .entry-content > p:first-of-type {
    font-size: 1rem;
    line-height: 1.45;
    margin: 0 0 0.65rem !important;
  }
}

/* ------------------------------------------------------------------ *
 * 5) Section headings (e.g. "What SumHours does", "How this is
 *    calculated"): the page's own H2s read as too large/dominant on
 *    phone widths relative to the now-more-compact page title above them.
 *    Sizing only — every heading's actual text is untouched, and desktop
 *    is completely unaffected (this rule only exists under 480px).
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .entry-content h2 {
    font-size: 1.75rem; /* ~28px */
    line-height: 1.3;
    margin: 1.25rem 0 0.5rem;
  }
  .entry-content h3 {
    font-size: 1.15rem;
    line-height: 1.3;
  }
}

/* ------------------------------------------------------------------ *
 * 6) Footer.
 *
 *    GeneratePress lays the three footer widgets out with FLEXBOX, not
 *    CSS grid: #footer-widgets > .footer-widgets-container >
 *    .inside-footer-widgets > .footer-widget-1/2/3, where
 *    .inside-footer-widgets is `display:flex; flex-direction:row` at
 *    >=768px (three equal `flex:1 1 0` columns) and GP itself switches
 *    that to `flex-direction:column` (full-width stack) below 768px. An
 *    earlier version of this file targeted `.footer-widgets` with
 *    `grid-template-columns`, which had no visual effect at all — that
 *    element is a single-item flex/grid parent one level too high; the
 *    real column control is on `.inside-footer-widgets` and its flex
 *    children, fixed below.
 *
 *    Desktop (>=768px): completely untouched — GP's native 3-column row.
 *
 *    380-767px (covers both what was "tablet" and "phone" here): the
 *    brand widget (first in DOM order, per the site's existing
 *    SumHours / Calculators / About order) spans the full row; the
 *    remaining two widgets (Calculators, About) sit side by side.
 *
 *    Below 380px, where two columns of calculator-name-length links
 *    would be cramped, GP's own native `flex-direction:column` (already
 *    active there without any rule from us) gives one clean stacked
 *    column — nothing to override.
 *
 *    The empty-<li> rule just below applies at every width, not only on
 *    phone — it's cleaning up a stray blank list item the footer's
 *    Calculators list block content actually contains (visible as an
 *    empty bullet on desktop too), not a responsive concern. The proper
 *    fix is still to delete that empty item from the block in
 *    Appearance → Widgets; this is a harmless, standard `:empty` safety
 *    net either way, not a fragile hack — it will never hide a list item
 *    that has real content.
 * ------------------------------------------------------------------ */
.site-footer .footer-widgets li:empty {
  display: none;
}
@media (min-width: 380px) and (max-width: 767px) {
  .site-footer .inside-footer-widgets {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 1rem 1.25rem;
  }
  .site-footer .footer-widget-1 {
    flex: 1 1 100% !important;
  }
  .site-footer .footer-widget-2,
  .site-footer .footer-widget-3 {
    flex: 1 1 calc(50% - 0.625rem) !important;
  }
}
@media (max-width: 480px) {
  .site-footer .inside-site-footer {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
  }
  .site-footer .footer-widgets .widget-title,
  .site-footer .footer-widgets h2,
  .site-footer .footer-widgets h3 {
    font-size: 1rem;
    margin: 0 0 0.4rem;
  }
  .site-footer .footer-widgets ul {
    margin: 0;
  }
  .site-footer .footer-widgets li {
    line-height: 1.5;
    margin-bottom: 0.25rem;
  }
  .site-footer .footer-widgets p {
    line-height: 1.5;
    margin: 0;
  }
}

/* ------------------------------------------------------------------ *
 * 7) Footer credit: remove GeneratePress's own "Built with GeneratePress"
 *    attribution, keeping the real copyright text next to it. Applies at
 *    every width, not just mobile — it's an unwanted public credit, not a
 *    responsive concern.
 *
 *    The live markup is `<span class="copyright">© 2026 sumhours.com</span>
 *    • Built with <a href="https://generatepress.com">GeneratePress</a>` —
 *    the separator and "Built with" are a bare text node with no wrapping
 *    element, which CSS cannot select or hide on its own (only the <a>
 *    itself is a real, targetable element). Hiding just the link leaves a
 *    dangling "© 2026 sumhours.com • Built with" fragment.
 *
 *    The fix: collapse the whole line to invisible, then regenerate it as
 *    static content on the container. The regenerated text is copied
 *    verbatim from what's already live ("© 2026 sumhours.com") — nothing
 *    new is introduced — so this is a structural fix for an unselectable
 *    text node, not a copy change. If this line's actual copyright text
 *    is ever edited in Appearance → Customize → Layout → Footer →
 *    Copyright, update the `content` value below to match, or this rule
 *    will keep showing the older text.
 * ------------------------------------------------------------------ */
.site-footer a[href*="generatepress.com"],
.site-info a[href*="generatepress.com"] {
  display: none !important;
}
.site-footer .copyright-bar,
.site-footer .copyright-bar * {
  font-size: 0 !important;
  line-height: 0 !important;
}
.site-footer .copyright-bar::before {
  content: "© 2026 sumhours.com";
  display: inline-block;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
}

/* ------------------------------------------------------------------ *
 * 8) Back-to-top: unnecessary on a phone screen and can overlap footer
 *    content — hidden below the tablet breakpoint. Desktop/tablet
 *    behaviour is completely untouched.
 * ------------------------------------------------------------------ */
@media (max-width: 480px) {
  #generate-back-to-top,
  .generate-back-to-top {
    display: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * 9) Print: a calculator page prints as a clean result, not the whole
 *    site. This only hides the site's own chrome (header, nav, footer,
 *    admin bar, back-to-top); the calculator's own print treatment (hiding
 *    its buttons, forcing collapsed <details> open, black-on-white) lives
 *    in the calculator plugin's own CSS, not here — this file only ever
 *    touches GeneratePress chrome, never the calculator plugin's own class
 *    namespace, matching every other rule above.
 * ------------------------------------------------------------------ */
@media print {
  .site-header,
  .main-navigation,
  #site-navigation,
  .site-footer,
  #wpadminbar,
  #generate-back-to-top,
  .generate-back-to-top {
    display: none !important;
  }
  /* The site footer (hidden above) is where brand identification normally
     lives on screen — replace it on paper with one plain line, since the
     calculator's own printed output otherwise carries no brand mark once
     the site chrome is gone. */
  .entry-content::after {
    content: "sumhours.com";
    display: block;
    margin-top: 1rem;
    font-size: 0.75rem;
    color: #000;
  }
}