/**
 * Etchly Policy / Info Pages — Shared Stylesheet
 *
 * Used by: faq.html, shipping.html, returns.html, privacy.html, terms.html
 *
 * Inherits the variables from variables.css and global.css. Adds layout
 * scaffolding for content-heavy long-form pages (header, prose body,
 * accordion, footer).
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: var(--main-bg, #f8fafc);
    color: var(--content-text, #1a1f27);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.dark-mode {
    background: var(--dark-bg, #0b0e12);
    color: var(--dark-hi, #f7fbff);
}

/* ────────────────────────────────────────────────────────────────────────
   HEADER (matches contact.html / index.html pattern)
   ──────────────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════
   SITE HEADER - COPIED VERBATIM FROM index.html

   These pages used to have their own header: a 90px bar, a gradient, a
   drop shadow, a different border colour, 30px padding and a 60px logo.
   index.html and store.html have a 74px bar, flat translucent background,
   no shadow, 34px padding and a 55px logo. Moving between the two moved
   the whole header, and matching them one property at a time kept missing
   something.

   So the rules below are index.html's header CSS, copied as-is, and the
   markup on these pages was changed to match index's markup exactly
   (header.site > .wrap.nav > .logo + .nav-links + .nav-right).

   ⚠ index.html and store.html still carry their own inline copy of these
   rules. There is no shared stylesheet for them, so this is a SECOND copy.
   If you change the header on index, change it here in the same sitting or
   the pages will drift apart again.

   The custom properties below are index's, not variables.css's - the header
   rules reference --cyan/--orange/--ink/--disp, which variables.css does
   not define. Checked for collisions: none of these names exist there.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#0e1620; --ink-2:#1b2733;
  --cyan:#00a9e0; --cyan-deep:#0079a6;
  --orange:#ff8c00; --orange-deep:#ea6c0a;
  --line:#dde4e8; --line-strong:#c4cfd5;
  --paper:#fff;
  --disp:'Archivo',system-ui,sans-serif;
}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site .wrap{max-width:none;padding-left:34px;padding-right:34px}
.nav{display:flex;align-items:center;gap:28px;height:74px}
.logo img{height:55px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:14px}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-2);padding:6px 0;position:relative}
.nav-links a:hover{color:var(--cyan-deep)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--orange);transition:width .2s}
.nav-links a:hover::after{width:100%}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.hbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:700;font-size:13.5px;padding:9px 14px;border-radius:9px;border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .12s;white-space:nowrap;position:relative}
.hbtn:hover{transform:translateY(-1px)}.hbtn svg{width:16px;height:16px;flex:none}
.hbtn-design{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 4px 12px rgba(255,140,0,.28)}
.hbtn-design:hover{background:var(--orange-deep);border-color:var(--orange-deep)}
.hbtn-wish{background:#fff;border-color:#f4b8c6;color:#e74c6b;padding:9px 11px}
.hbtn-wish:hover{border-color:#e74c6b;background:#fff5f7}.hbtn-wish svg{fill:#e74c6b}
.hbtn-cart{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.hbtn-cart:hover{background:var(--cyan-deep);border-color:var(--cyan-deep)}
.hbtn-contact{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.hbtn-contact:hover{border-color:var(--cyan);color:var(--cyan-deep)}
.hbtn-avatar{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none;border:0;transition:transform .12s}
.hbtn-avatar:hover{transform:translateY(-1px)}.hbtn-avatar svg{width:19px;height:19px}
.hbtn-login{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.hbtn-login:hover{border-color:var(--cyan);color:var(--cyan-deep)}
.hbtn-login svg{width:17px;height:17px}
.hbtn-theme{background:#fff;border-color:var(--line-strong);color:var(--ink);padding:9px 11px}
.hbtn-theme:hover{border-color:var(--cyan);color:var(--cyan-deep)}
.hbtn-theme svg{width:17px;height:17px}
.acct{position:relative;flex:none}
.acct-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:240px;background:#fff;border:1px solid #e0e0e0;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;display:none;z-index:200}
.acct-menu.open{display:block}
.acct-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:6px;font-size:14px;color:#0b0e12;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--body);text-decoration:none;transition:background .12s,color .12s}
.acct-item:hover{background:#f7f7f9;color:var(--cyan)}
.acct-item svg{width:16px;height:16px;color:var(--cyan);flex:none}
.acct-signout{color:#dc3545;border-top:1px solid #e0e0e0;margin-top:4px;padding-top:12px}
.acct-signout:hover{background:rgba(220,53,69,.08);color:#c82333}
.acct-signout svg{color:#dc3545}
.acct-admin{border-top:1px solid #e0e0e0;margin-top:4px;padding-top:14px;color:#F58220;font-weight:600}
.acct-admin:hover{background:rgba(245,130,32,.08);color:#cc7000}
.acct-admin svg{color:#F58220}
.hbadge{min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;font-family:var(--body)}
.hbtn-cart .hbadge{background:#fff;color:var(--cyan-deep)}
.hbtn-wish .hbadge{position:absolute;top:-5px;right:-5px;background:#e74c6b;color:#fff}

/* Dark mode - index uses [data-theme] on <html>; js/theme.js sets that AND
   body.dark-mode, so both conventions work on these pages. */
[data-theme="dark"] header.site{background:rgba(12,18,25,.85)}
[data-theme="dark"] .acct-item{color:var(--ink)}
[data-theme="dark"] .hbtn-wish,[data-theme="dark"] .hbtn-contact,[data-theme="dark"] .hbtn-login,[data-theme="dark"] .hbtn-theme,[data-theme="dark"] .acct-menu,[data-theme="dark"] .acc-card,[data-theme="dark"] .acc-add,[data-theme="dark"] .search-sug,[data-theme="dark"] .store-select,[data-theme="dark"] .cat-pill,[data-theme="dark"] .sbtn-cart,[data-theme="dark"] .pv-wish,[data-theme="dark"] .v1-node,[data-theme="dark"] .suite-card{background:var(--paper)}
[data-theme="dark"] .hbtn-avatar{background:var(--cyan)}
[data-theme="dark"] .hbtn-wish:hover{background:rgba(231,76,107,.14)}
[data-theme="dark"] .acct-item:hover{background:rgba(255,255,255,.06)}
[data-theme="dark"] .acct-menu{border-color:var(--line)}
[data-theme="dark"] .acct-signout,[data-theme="dark"] .acct-admin{border-top-color:var(--line)}


/* Responsive header rules, also copied from index.html. */
@media(max-width:980px){
    .nav-links{display:none}
}

@media(max-width:600px){
    .nav-links{display:none}
    .hbtn-design .hlabel,.hbtn-cart .hlabel,.hbtn-login .hlabel{display:none}
    .hbtn-design,.hbtn-cart{padding:9px 11px}
    .hbtn-contact{display:none}
}

@media (max-width: 980px){
    .mobile-burger-btn{display:inline-flex !important;width:40px;height:40px;font-size:20px;flex:0 0 auto;}
    header.site .wrap{padding-left:14px;padding-right:14px;}
    .nav{gap:10px;flex-wrap:nowrap;}
    .nav-right{gap:6px;flex:0 0 auto;margin-left:auto;}
    .hbtn{padding:9px 10px;}
    .hbtn .hlabel{display:none;}
    .hbtn-design,.hbtn-theme,.hbtn-contact{display:none;}
    .logo{flex:0 0 auto;}
    .logo img{height:42px;width:auto;}
}

/* ── Overrides for three rules that only exist on THESE pages ──────────────

   index.html loads none of variables.css / theme-fixes.css, so its header is
   untouched by them. These pages load both, and each one reaches `header`:

   1. variables.css  `header { display:flex; padding:8px 12px }`
      index's header.site is a BLOCK containing a flex .wrap.nav. Left as a
      flex container, the single child became a flex item and the whole bar
      sat centred instead of logo-left / buttons-right.

   2. variables.css + theme-fixes.css both paint `header` with a grey
      top-to-bottom gradient. header.site is more specific so it wins on
      `background`, but `body.light-mode header` and
      `body:not(.light-mode) header` are specificity 0-2-1 - HIGHER than
      header.site at 0-1-1 - so the gradient came back. Hence the explicit
      body-qualified rules below, which match that specificity and load later.

   3. policy.css has no global `a` reset, so header links showed the browser
      default underline. index has `a{color:inherit;text-decoration:none}`.
      Scoped to the header here so policy body links keep their styling. */

header.site{display:block;padding:0}
body.light-mode header.site,
body:not(.dark-mode) header.site{
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--line,#dde4e8);
}
body.dark-mode header.site,
body:not(.light-mode) header.site{
  background:rgba(12,18,25,.85);
  border-bottom:1px solid var(--line,#2d3748);
}
/* ⚠ text-decoration ONLY - do not add `color` here.
   index gets away with a bare `a{color:inherit}` because at 0-0-1 it loses
   to every .hbtn-* colour rule (0-1-0). Scoped as `header.site a` this is
   0-1-2, which BEATS them - so adding colour here silently repaints every
   button in the bar. Button colours come from the .hbtn-* rules above. */
header.site a{text-decoration:none}
header.site .nav-links a{color:var(--ink-2)}
header.site .nav-links a:hover{color:var(--cyan-deep)}

header .btns {
    display: flex;
    gap: 8px;
    align-items: center;
}

header .btn {
    padding: 9px 16px;
    border-radius: 8px;
    background: var(--card-bg, #fff);
    color: var(--content-text, #1a1f27);
    border: 1px solid var(--card-border, #e2e8f0);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

header .btn:hover {
    border-color: var(--accent, #00A9E0);
    color: var(--accent, #00A9E0);
}

body.dark-mode header .btn {
    background: var(--dark-card-bg, #1a1f27);
    color: var(--dark-hi, #f7fbff);
    border-color: var(--dark-card-border, #2d3748);
}

/* ── Header accent buttons — uniform with cart.css / order_confirm.css ──────
   These pages load policy.css INSTEAD of global.css, so none of the id-based
   header colours reached them: "Etchly Store" and "Etchly Designer" rendered
   as plain outlined buttons while the same header on cart and account showed
   them teal and orange. The two buttons also had no id at all until now.

   Kept byte-identical to the cart.css block. If the palette changes, change it
   in all three. */

#templateStoreBtn {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 700;
}

#backToDesignerBtn {
    background: var(--theme-orange) !important;
    border-color: var(--theme-orange) !important;
    color: #fff !important;
    font-weight: 700;
}

#viewWishlistBtn {
    background: transparent;
    border-color: #ff6b81;
    color: #ff6b81;
    font-weight: 700;
}

#viewCartBtn {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 700;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────────────────
   PAGE LAYOUT
   ──────────────────────────────────────────────────────────────────────── */
.policy-page {
    flex: 1;
    max-width: 960px;
    margin: 0 auto;
    padding: 60px 24px 80px;
    width: 100%;
}

.policy-header {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--card-border, #e2e8f0);
}

body.dark-mode .policy-header {
    border-bottom-color: var(--dark-card-border, #2d3748);
}

.policy-header h1 {
    font-size: 2.6em;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--content-text, #1a1f27);
    letter-spacing: -0.02em;
}

body.dark-mode .policy-header h1 {
    color: var(--dark-hi, #f7fbff);
}

.policy-header p.lede {
    font-size: 1.1em;
    color: var(--light-muted, #6b7280);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

body.dark-mode .policy-header p.lede {
    color: var(--dark-muted, #9aa3b2);
}

.policy-header .meta {
    margin-top: 18px;
    font-size: 13px;
    color: var(--light-muted, #6b7280);
}

/* ────────────────────────────────────────────────────────────────────────
   PROSE / CONTENT
   ──────────────────────────────────────────────────────────────────────── */
.policy-content {
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: 14px;
    padding: 48px 56px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

body.dark-mode .policy-content {
    background: var(--dark-card-bg, #1a1f27);
    border-color: var(--dark-card-border, #2d3748);
}

.policy-content h2 {
    font-size: 1.45em;
    font-weight: 700;
    margin-top: 36px;
    margin-bottom: 14px;
    color: var(--accent, #00A9E0);
    letter-spacing: -0.01em;
}

.policy-content h2:first-child { margin-top: 0; }

.policy-content h3 {
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 22px;
    margin-bottom: 10px;
    color: var(--content-text, #1a1f27);
}

body.dark-mode .policy-content h3 {
    color: var(--dark-hi, #f7fbff);
}

.policy-content p {
    line-height: 1.75;
    margin-bottom: 14px;
    color: var(--content-text, #1a1f27);
}

body.dark-mode .policy-content p {
    color: var(--dark-hi, #f7fbff);
}

.policy-content ul, .policy-content ol {
    margin: 12px 0 18px 22px;
    line-height: 1.75;
}

.policy-content ul li, .policy-content ol li {
    margin-bottom: 8px;
}

.policy-content a {
    color: var(--accent, #00A9E0);
    text-decoration: none;
    font-weight: 500;
}

.policy-content a:hover {
    text-decoration: underline;
}

.policy-content strong { font-weight: 700; }
.policy-content em { font-style: italic; color: var(--light-muted, #6b7280); }

.policy-content .callout {
    margin: 22px 0;
    padding: 16px 20px;
    background: rgba(0,169,224,.06);
    border-left: 3px solid var(--accent, #00A9E0);
    border-radius: 6px;
    font-size: 0.96em;
}

body.dark-mode .policy-content .callout {
    background: rgba(0,169,224,.12);
}

.policy-content .callout strong { color: var(--accent, #00A9E0); }

.policy-content .warn-callout {
    margin: 22px 0;
    padding: 16px 20px;
    background: rgba(245,130,32,.08);
    border-left: 3px solid var(--theme-orange, #F58220);
    border-radius: 6px;
    font-size: 0.96em;
}

body.dark-mode .policy-content .warn-callout {
    background: rgba(245,130,32,.16);
}

.policy-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 0.95em;
}

.policy-content table th, .policy-content table td {
    padding: 10px 14px;
    text-align: left;
    border: 1px solid var(--card-border, #e2e8f0);
}

body.dark-mode .policy-content table th,
body.dark-mode .policy-content table td {
    border-color: var(--dark-card-border, #2d3748);
}

.policy-content table th {
    background: var(--light-panel, #f1f5f9);
    font-weight: 700;
}

body.dark-mode .policy-content table th {
    background: var(--dark-panel, #10151c);
}

/* ────────────────────────────────────────────────────────────────────────
   FAQ ACCORDION
   ──────────────────────────────────────────────────────────────────────── */
.faq-section {
    margin-top: 32px;
}

.faq-section-title {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--accent, #00A9E0);
    margin: 36px 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent, #00A9E0);
}

.faq-section-title:first-child { margin-top: 0; }

details.faq-item {
    background: var(--main-bg, #f8fafc);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: border-color 0.15s, background 0.15s;
}

body.dark-mode details.faq-item {
    background: var(--dark-bg, #0b0e12);
    border-color: var(--dark-card-border, #2d3748);
}

details.faq-item[open] {
    border-color: var(--accent, #00A9E0);
    background: var(--card-bg, #fff);
}

body.dark-mode details.faq-item[open] {
    background: var(--dark-card-bg, #1a1f27);
}

details.faq-item summary {
    padding: 16px 22px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.02em;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--content-text, #1a1f27);
}

body.dark-mode details.faq-item summary {
    color: var(--dark-hi, #f7fbff);
}

details.faq-item summary::-webkit-details-marker { display: none; }

details.faq-item summary::after {
    content: '+';
    font-size: 1.5em;
    font-weight: 300;
    color: var(--accent, #00A9E0);
    line-height: 1;
    transition: transform 0.2s;
    margin-left: 14px;
}

details.faq-item[open] summary::after {
    content: '−';
    transform: rotate(0deg);
}

details.faq-item summary:hover {
    color: var(--accent, #00A9E0);
}

details.faq-item .faq-body {
    padding: 0 22px 18px;
    line-height: 1.75;
    color: var(--content-text, #1a1f27);
}

body.dark-mode details.faq-item .faq-body {
    color: var(--dark-hi, #f7fbff);
}

details.faq-item .faq-body p { margin-bottom: 10px; }
details.faq-item .faq-body p:last-child { margin-bottom: 0; }

/* ────────────────────────────────────────────────────────────────────────
   POLICY CROSS-LINKS (footer of each page — sibling links)
   ──────────────────────────────────────────────────────────────────────── */
.policy-crosslinks {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 36px;
    padding: 24px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: 12px;
}

body.dark-mode .policy-crosslinks {
    background: var(--dark-card-bg, #1a1f27);
    border-color: var(--dark-card-border, #2d3748);
}

.policy-crosslinks a {
    padding: 8px 16px;
    border-radius: 6px;
    background: transparent;
    color: var(--content-text, #1a1f27);
    border: 1px solid var(--card-border, #e2e8f0);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
}

body.dark-mode .policy-crosslinks a {
    color: var(--dark-hi, #f7fbff);
    border-color: var(--dark-card-border, #2d3748);
}

.policy-crosslinks a:hover {
    background: var(--accent, #00A9E0);
    border-color: var(--accent, #00A9E0);
    color: #fff;
}

.policy-crosslinks a.current {
    background: var(--accent, #00A9E0);
    border-color: var(--accent, #00A9E0);
    color: #fff;
    pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────────────
   FOOTER (matches index.html pattern)
   ──────────────────────────────────────────────────────────────────────── */
.site-footer {
    background: linear-gradient(180deg, var(--dark-card-bg, #1a1f27), var(--dark-bg, #0b0e12));
    color: var(--dark-hi, #f7fbff);
    padding: 40px 30px 0;
    margin-top: auto;
}

.site-footer .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--dark-card-border, #2d3748);
}

.site-footer .footer-section h4 {
    color: var(--accent, #00A9E0);
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
}

.site-footer .footer-section p,
.site-footer .footer-section li {
    color: var(--dark-muted, #9aa3b2);
    font-size: 0.92em;
    line-height: 1.7;
}

.site-footer .footer-section ul { list-style: none; padding: 0; }

.site-footer .footer-section a {
    color: var(--dark-muted, #9aa3b2);
    text-decoration: none;
    transition: color 0.15s;
}

.site-footer .footer-section a:hover { color: var(--accent, #00A9E0); }

.site-footer .footer-social {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.site-footer .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--dark-card-border, #2d3748);
    color: var(--dark-muted, #9aa3b2);
    transition: background 0.15s, color 0.15s;
}

.site-footer .social-icon:hover {
    background: var(--accent, #00A9E0);
    color: #fff;
}

.site-footer .footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
    font-size: 0.85em;
    color: var(--dark-muted, #9aa3b2);
}

.site-footer .footer-bottom a { color: var(--accent, #00A9E0); text-decoration: none; }

/* ────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .policy-page { padding: 30px 16px 50px; }
    .policy-header h1 { font-size: 2em; }
    .policy-content { padding: 28px 24px; }
    .site-footer .footer-content { grid-template-columns: 1fr 1fr; gap: 28px; }
    header { padding: 0 16px; }
    header .btns { gap: 4px; }
    header .btn { padding: 7px 11px; font-size: 13px; }
}

@media (max-width: 540px) {
    .site-footer .footer-content { grid-template-columns: 1fr; }
    header .btn span,
    header .btn i { display: inline; }
    /* Hide some less-critical buttons on very narrow screens */
    header .btn#viewWishlistBtn,
    header .btn#viewContactBtn { display: none; }
}

/* Tighter responsive tier for narrow phones (≤480px) */
@media (max-width: 480px) {
    .policy-page { padding: 24px 12px 40px; }
    .policy-header h1 { font-size: 1.6em; }
    .policy-content { padding: 22px 18px; }
    .policy-content h2 { font-size: 1.15em; }
    .policy-content h3 { font-size: 1em; }
    .policy-content p,
    .policy-content li { font-size: 0.95em; }
    /* FAQ accordion summaries stay tappable */
    .faq-item summary { padding: 14px 16px; font-size: 0.98em; min-height: 44px; }
    .faq-body { padding: 14px 16px; font-size: 0.95em; }
    /* Inputs/textareas don't trigger iOS zoom on focus */
    input, select, textarea { font-size: 16px; }
}