/* ============================================================
   PostaMap — "Atlas Instrument" design system
   Cartographic/celestial precision: coordinate graticule, brass
   metal, engraving ink, chart paper. Two product faces (night sky
   / city streets) unified by one metal (brass).
   ============================================================ */
:root {
    /* legacy tokens fed by config.php (kept for pages that read them) */
    --main_color: [main_color];
    --second_color: [second_color];
    --main_font: [main_font];
    --second_font: [second_font];

    /* type roles */
    --display: "Newsreader", serif;
    --body: "Instrument Sans", sans-serif;
    /* label/data role. NOT monospaced any more — kept the token name to avoid
       touching its 11 call sites. Numeric labels pair it with tabular-nums. */
    --mono: "Instrument Sans", sans-serif;

    /* surfaces */
    --ink: #0B0F1A;        /* engraving ink / night sky base + chrome */
    --ink-2: #131A2B;      /* raised night panel */
    --ink-3: #1E2740;      /* night hairline surface */
    --paper: #E7E1D1;      /* day / city chart surface */
    --paper-2: #EFEADD;    /* lighter card paper */
    --bone: #F3EFE4;       /* light text on ink */
    --white: #FBFAF6;

    /* metals / pigments */
    --brass: #C89B4A;      /* THE accent — unifies both faces */
    --brass-hi: #E4C888;   /* hover / highlight */
    /* deep night-sky blue — same hue as --ink (~222deg), lifted until it is legible
       on paper. Token names kept: they are read in 10 places across 5 stylesheets. */
    --verd: #3E5896;       /* water / rule lines — day/city secondary */
    --verd-ink: #33497A;   /* text-safe night blue on paper: links, accents */

    /* lines + muted text */
    --line-paper: rgba(11,15,26,.14);
    --line-ink: rgba(243,239,228,.16);
    --muted-paper: rgba(11,15,26,.64);
    --muted-ink: rgba(243,239,228,.60);

    /* the coordinate graticule module — disabled on backgrounds (set back to 46px to restore the grid) */
    --grat: 100000px;
}

body, html {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
/* clip, not hidden: the off-canvas #mobile-menu parks 320px to the right and would
   otherwise leave the page scrollable sideways. `clip` trims it without creating a
   scroll container, so the sticky poster preview on the constructor pages still works. */
html{ scroll-behavior: smooth; overflow-x: clip; }

body{
    font-family: var(--body);
    line-height: 1.6;
    color: var(--ink);
    font-size: 16px;
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---- type ---- */
h1,h2,h3,h4{
    font-family: var(--display);
    font-weight: 700;
    padding: 0;
    margin: 0;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--ink);
}
/* optical weight: large sizes need less weight than small ones to read as equal */
h1{ font-size: clamp(38px, 5.2vw, 68px); font-weight: 500; margin-bottom: 28px; }
h2{ font-size: clamp(27px, 3.4vw, 40px); font-weight: 500; }
h3{ font-size: 22px; }
h4{ font-size: 19px; }
p{ margin: 0 0 16px 0; }

a{
    color: var(--verd-ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(51,73,122,.4);
    transition: color .2s, border-color .2s;
}
a:hover{ color: var(--brass); border-color: var(--brass); }

ul{ margin: 0; padding: 0; list-style-type: none; }

/* Text pages run in a narrower, centred column than the 1280px default — headings,
   text, images and the CTA all share the one measure. .content already centres via
   margin:0 auto, so only the max-width changes. */
.simple.content{ max-width: 900px; }

/* Prose headings on the text pages (about, the policies, blog posts). The global
   reset above zeroes every heading margin, which suits the landing sections but
   leaves a running text with no air: a subhead sat 16px under the previous
   paragraph and flush against its own. Space above is deliberately much larger
   than space below, so a heading groups with the text it introduces. Adjacent
   margins collapse, so the paragraph's own 16px does not add to the gap. */
.simple h2{ margin: clamp(36px, 4vw, 56px) 0 16px; }
.simple h3{ margin: clamp(28px, 2.6vw, 36px) 0 10px; }
.simple h4{ margin: 24px 0 8px; }
.simple h2:first-child, .simple h3:first-child, .simple h4:first-child{ margin-top: 0; }

/* prose lists carry a brass dash — the marker echoes the eyebrow rule. The browser's
   40px indent used to reserve room for a marker whose content was an empty string. */
.simple ul{ margin: revert; padding-left: 1.2em; list-style-type: none; }
.simple li{ margin-bottom: 6px; }
.simple ul li::before{
    content: "–";
    color: var(--brass);
    font-weight: 700;
    display: inline-block;
    width: 1.2em;
    margin-left: -1.2em;
}

/* coordinate label — the site's structural device.
   Real data (coords, plate refs), never decoration. */
.eyebrow{
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* a label, not a link — muted ink on light surfaces, brass on dark ones */
    color: var(--muted-paper);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.eyebrow::before{
    content: "";
    width: 22px;
    height: 1px;
    background: var(--brass);
    flex: none;
}

*, *::before, *::after{ box-sizing: border-box; }

table{ width: 100%; margin-bottom: 16px; border-collapse: collapse; }
th, td{ padding: 12px 8px; border-bottom: 1px solid var(--line-paper); text-align: left; }
table thead th{
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-paper);
    background: transparent;
}

input:not(.btn):not([TYPE=checkbox]):not([TYPE=radio]):not([TYPE=button]):not([TYPE=submit]), select, textarea, button{
    border: 1px solid var(--line-paper);
    border-radius: 2px;
    padding: 11px;
    font-size: 16px;
    line-height: 1.4;
    -webkit-appearance: none;
    color: var(--ink);
    font-family: inherit;
    background: var(--white);
}
p.title{ font-family: var(--display); font-size: 19px; font-weight: 700; }

.content, #fixed-menu .wrapper{
    width: 92%;
    margin: 0 auto;
    max-width: 1280px;
    position: relative;
}
.content{ padding: 104px 0; }

hr{ margin: 24px 0; border: 0; border-top: 1px solid var(--line-paper); }
.blocked{ opacity: .5; pointer-events: none; }

/* layout utils (kept from engine) */
.flex{ display: flex; }
.space{ justify-content: space-between; }
.hcenter{ justify-content: center; }
.vcenter{ align-items: center; }
.w30{ width: 30%; } .w40{ width: 40%; } .w50{ width: 50%; }
.w60{ width: 60%; } .w70{ width: 70%; }
.fright{ float: right; }
.center{ text-align: center; margin: 0 auto; }
.right{ text-align: right; }

/* ---- buttons: sharp, instrument-like ---- */
.btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--bone);
    border-radius: 2px;
    border: 1px solid var(--ink);
    padding: 15px 26px;
    text-align: center;
    transition: background-color .25s, color .25s, border-color .25s, transform .2s;
    cursor: pointer;
    background: var(--ink);
    text-decoration: none;
}
.btn:hover{ background: var(--brass); border-color: var(--brass); color: var(--ink); }
/* brass fill — for dark surfaces */
.btn.brass{ background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn.brass:hover{ background: var(--brass-hi); border-color: var(--brass-hi); }
/* keyline — outline on dark surfaces */
.btn.ghost{ background: transparent; border-color: var(--line-ink); color: var(--bone); }
.btn.ghost:hover{ background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn.white{ background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.btn.white:hover{ background: var(--ink); color: var(--bone); }
.btn.inactive,.btn.inactive:hover{ background: #333; color: #999; border-color:#333; }

@keyframes slide{ from{ transform: translateX(0);} to{ transform: translateX(50%);} }
.btn.processing{ position: relative; overflow: hidden; pointer-events: none; background-color: var(--ink-3); color: var(--muted-ink); }
.btn.processing:before{
    content: ""; position: absolute; top: 0; left: -100%; width: 200%; height: 100%;
    background: repeating-linear-gradient(to right, var(--brass) 0, var(--brass) 5%, transparent 5%, transparent 10%);
    animation: slide 5s linear infinite; opacity: .25;
}

.mobile-el{ display: none; }
.hidden{ display: none; }
.inline{ display: inline-block; }

/* skip link */
.skip-link{
    position: absolute; top: 8px; left: 8px; z-index: 10000;
    transform: translateY(-150%);
    background: var(--bone); color: var(--ink);
    border: 1px solid var(--brass); border-radius: 2px;
    padding: 8px 12px; transition: transform .2s;
}
.skip-link:focus{ transform: translateY(0); }

/* ---- text logo: light italic "posta" + heavy upright brass "Map" ----
   The markup says "Posta<span>Map</span>" in four templates plus the WP theme,
   so the lowercasing is done here rather than in each file; the span resets
   text-transform to keep its capital M. */
.logo-text{
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    text-transform: lowercase;
    font-size: 25px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--bone);
    border: 0;
    margin: 0;
}
.logo-text span{
    color: var(--brass);
    font-weight: 800;
    font-style: normal;
    text-transform: none;
}
.logo-text:hover{ text-decoration: none; color: var(--bone); border: 0; }
#fixed-menu .logo-text{ color: var(--ink); }
#fixed-menu .logo-text span{ color: var(--brass); }

/* ---- header inner ----
   One nav row, three hosts: the dark hero on home, the paper bar on inner pages,
   and the sticky bar. Geometry lives here so all three sit identically; only the
   host sets `color`, and the row inherits it. */
#header-inner, #fixed-menu .wrapper{ padding-top: 4px; }
#header-inner{ color: var(--bone); }
#header-inner a, #fixed-menu a, #mobile-menu a{ border: 0; }
#header-inner a:hover, #fixed-menu a:hover, #mobile-menu a:hover{ text-decoration: none; }

/* logo + tagline stack. The row is align-items:center, so the pair centres as
   one block against the nav. */
.brand{ display: flex; flex-direction: column; }
.header-coords{
    /* the host sets `color` — bone over the dark hero, ink on the white bar —
       so inherit it and mute it the same amount as the nav links instead of
       naming a colour that only works on one of the two backgrounds. */
    color: inherit;
    opacity: .68;
    font-size: 10px;
    margin: 3px 0 0;
}
.header-coords::before{ width: 16px; }

.mobile-menu-btn{
    float: right; display: none; width: 44px; height: 44px;
    background: transparent url(/view/images/burger-w-icon.svg) no-repeat center;
    background-size: 22px 22px; border: 0; cursor: pointer; outline: none; text-indent: 20px;
}
#fixed-menu .mobile-menu-btn{ background: transparent url(/view/images/burger-b-icon.svg) no-repeat center; background-size: 22px 22px; }

.menu{ display: inline-block; }
.menu a, .shopping-cart, .my-account{
    font-family: var(--body);
    font-size: 15px;
    /* takes the colour of the bar it sits in — bone on the hero, ink on paper */
    color: inherit;
    line-height: 36px;
    display: inline-block;
    padding: 0 14px;
    position: relative;
    opacity: .68;
    transition: opacity .25s, color .25s;
}
.menu a:hover{ opacity: 1; color: var(--brass); }
.menu a.active{ opacity: 1; }
.menu a.active::after{
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
    height: 1px; background: var(--brass);
}
.shopping-cart:before, .my-account:before{ content: ""; position: absolute; top: 10px; left: 10px; width: 16px; height: 16px; }
.shopping-cart, .my-account{ padding: 0 0 0 34px; }
.shopping-cart:before{ background: url(/view/images/cart-w-icon.svg) no-repeat; }
.my-account:before{ left: 14px; background: url(/view/images/profile-w-icon.svg) no-repeat; }

/* sticky condensed bar */
#fixed-menu{
    position: fixed; z-index: 200; top: 0; width: 100%;
    /* --white at 94% — the bar is translucent, so it cannot use the token directly */
    background: rgba(251,250,246,.94);
    backdrop-filter: saturate(120%) blur(6px);
    /* same padding as #header so the bar does not resize when it takes over on scroll */
    padding: 13px 0;
    visibility: hidden; opacity: 0;
    transition: opacity .3s;
    border-bottom: 1px solid var(--line-paper);
}
#fixed-menu.expand{ visibility: visible; opacity: 1; }
#fixed-menu .shopping-cart:before{ background: url(/view/images/cart-b-icon.svg) no-repeat; }
#fixed-menu .my-account:before{ background: url(/view/images/profile-b-icon.svg) no-repeat; }

#mobile-menu{
    position: fixed; background: var(--ink); top: 58px; z-index: 1000; bottom: 0; right: 0;
    width: 220px; box-shadow: -20px 10px 40px rgba(0,0,0,.5);
    padding: 20px; color: var(--muted-ink);
    transition: transform .3s, visibility 0s .3s; transform: translateX(320px);
    /* parked off-canvas: hidden keeps it out of the scrollable area (it added 14px
       of horizontal scroll at 360px) and out of the tab order */
    visibility: hidden;
}
#mobile-menu a{ display: block; color: var(--bone); opacity: .8; padding: 8px 0; border: 0; }
#mobile-menu a:hover{ opacity: 1; color: var(--brass); }

.select-arrow{ position: relative; }
.select-arrow:after{
    content: ""; position: absolute; top: 18px; right: 12px; width: 12px; height: 12px;
    background: url(/view/images/icons/arrow-b.svg) no-repeat; pointer-events: none;
}

/* ---- footer: ink plate with graticule + coordinate frame ---- */
footer{
    background:
        repeating-linear-gradient(0deg, transparent 0 calc(var(--grat) - 1px), var(--line-ink) calc(var(--grat) - 1px) var(--grat)),
        repeating-linear-gradient(90deg, transparent 0 calc(var(--grat) - 1px), var(--line-ink) calc(var(--grat) - 1px) var(--grat)),
        var(--ink);
    margin-top: auto;
    color: var(--bone);
    font-weight: 400;
    border-top: 1px solid var(--brass);
}
footer a{ color: var(--muted-ink); border: none; }
footer a:hover{ color: var(--brass); }
footer a.active{ color: var(--bone); }
footer .content{ padding: 44px 0 20px; text-align: left; }
.footer>li{ margin-bottom: 20px; }
#footer-logo{ font-size: 14px; color: var(--muted-ink); margin-right: 20px; }
#footer-logo p{ margin: 0; line-height: 20px; padding: 0; text-align: left; }
#footer-logo .logo-text{ font-size: 24px; margin-bottom: 4px; }
.footer-coords{
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--brass); margin: 4px 0 12px !important;
}
/* shorter rule than the 22px .eyebrow default — the footer sets the label at
   10px, so the full-length dash overpowered it. Same specificity as
   .eyebrow::before, so this has to stay below it in the file. */
.footer-coords::before{ width: 16px; }
#footer-contact{ margin-left: auto; }
footer .icons{ position: relative; padding: 0 0 6px 28px; }
footer .icons:before{ content: ""; left: 0; position: absolute; width: 20px; height: 20px; top: 2px; }
footer .icons.email:before{ background: url(/view/images/email-cir-w-icon.svg) no-repeat center/cover; }
footer .icons.fb-share:before{ background: url(/view/images/fb-cir-w-icon.svg) no-repeat center/cover; }
footer .icons.inst-share:before{ background: url(/view/images/inst-cir-w-icon.svg) no-repeat center/cover; }
.footer-bottom{ padding: 16px 0; border-top: 1px solid var(--line-ink); }
.footer-bottom a{ padding: 0 10px; font-size: 14px; }

@media only screen and (min-width: 1024px){
    footer a:hover{ color: var(--brass); }
    /* the wordmark only grows on desktop — on the mobile bar it would crowd the
       burger and the cart. #footer-logo .logo-text outranks this and stays 24px. */
    .logo-text{ font-size: 32px; }
}
@media only screen and (max-width: 1024px){
    /* h1/h2 sizes are fluid, so their optical weight follows the viewport */
    h1,h2{ font-weight: 600; }
    h3{ padding-bottom: 0; }
    .top_menu{ display: none; }
    .mobile-menu-btn{ display: block; }
    .shopping-cart{ position: absolute; top: 12px; right: 34px; color: inherit; }
    #mobile-menu.expand{ transform: translateX(0); visibility: visible; transition: transform .3s, visibility 0s; }
}
@media only screen and (max-width: 900px){
    /* h2 has bottomed out at its clamp minimum here — small size, full weight */
    h1,h2{ font-weight: 700; }
}
@media only screen and (max-width: 600px){
    .content{ padding: 60px 0; }
    .noflex600{ display: block; }
    /* the row stops being a flex track here, but the columns kept their 50% and
       collapsed to half the screen — give them the full measure once stacked */
    .noflex600 > .w30, .noflex600 > .w40, .noflex600 > .w50{ width: 100%; }
    .desktop-el{ display: none; }
    .mobile-el{ display: inherit; }
}

/* ---- modal ---- */
.cart-collaterals .coupon .button{ border: 0; }
.modal{ position: fixed; inset: 0; background: rgba(11,15,26,.6); z-index: 1000; display: none; }
.modal-content{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    box-shadow: 0 20px 60px rgba(0,0,0,.25); width: 50%; background: var(--white);
    border-radius: 2px; text-align: center; padding: 24px;
}
.modal-close{ position: absolute; right: 10px; top: 10px; width: 25px; height: 25px; border: 0; background: transparent; }
.modal-close:before, .modal-close:after{ position: absolute; content: " "; height: 25px; width: 2px; background-color: #bbb; }
.modal-close:hover:before, .modal-close:hover:after{ background-color: var(--brass); }
.modal-close:before{ transform: rotate(45deg); }
.modal-close:after{ transform: rotate(-45deg); }
.modal-buttons{ display: flex; justify-content: space-between; }
.modal .title{ font-family: var(--display); font-size: 32px; color: var(--ink); }
.modal .mess{ margin: 30px 0; display: none; font-size: 18px; }
.modal .mess span{ color: var(--verd-ink); }
.modal .mess.show{ display: block; }
.modal .popup-btn-no{ color: #222; background-color: #f0ede4; border-color: #f0ede4; }
@media only screen and (max-width: 600px){
    .modal-content{ width: 90%; }
    .modal .title{ font-size: 27px; }
}

/* ---- cookie banner ---- */
#cookie-banner{
    position: fixed; bottom: 20px; left: 20px; right: 20px; max-width: 640px; margin: 0 auto;
    background: var(--ink); color: var(--bone); padding: 22px 26px; border-radius: 2px;
    box-shadow: 0 10px 40px rgba(0,0,0,.4); z-index: 9999; border: 1px solid var(--brass);
}
#cookie-banner.hidden{ display: none; }
#cookie-banner p{ margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--muted-ink); }
#cookie-banner a{ color: var(--brass); border-bottom: 1px solid var(--brass); }
#cookie-banner .cookie-buttons{ display: flex; gap: 10px; justify-content: flex-end; }
#cookie-banner button{
    padding: 10px 22px; border: 1px solid var(--line-ink); border-radius: 2px;
    background: transparent; color: var(--bone); cursor: pointer; font-size: 14px; font-family: inherit;
    transition: background .2s, border-color .2s, color .2s;
}
#cookie-banner button:hover{ border-color: var(--bone); }
#cookie-banner button.primary{ background: var(--brass); color: var(--ink); border-color: var(--brass); }
#cookie-banner button.primary:hover{ background: var(--brass-hi); border-color: var(--brass-hi); }
#cookie-settings-link{
    background: none; border: 0; color: var(--muted-ink); font-weight: 400; padding: 0 10px;
    font-size: 14px; cursor: pointer; font-family: inherit;
}
#cookie-settings-link:hover{ color: var(--brass); }
@media only screen and (max-width: 600px){
    #cookie-banner{ left: 10px; right: 10px; bottom: 10px; padding: 18px 20px; }
    #cookie-banner .cookie-buttons{ flex-direction: column-reverse; }
    #cookie-banner button{ width: 100%; }
    .footer-bottom a, #cookie-settings-link{ padding: 0 5px; font-size: 12px; }
    #footer-logo p{ font-size: 12px; }
    footer .icons{ font-size: 13px; }
    /* two columns leave the address flush against the right edge on a phone —
       stack them so the contacts get the full measure */
    .footer.flex{ display: block; }
    #footer-logo{ margin: 0 0 24px; }
    #footer-contact{ margin-left: 0; }
}

/* visible keyboard focus */
:focus-visible{ outline: 2px solid var(--brass); outline-offset: 2px; }