/*
Theme Name: Arniston Trading
Theme URI: https://arnistontrading.com/
Description: Company website theme for Arniston Trading. On activation it creates the pages, menu and photos; texts are edited in Pages, company details in Appearance → Customize → Company details.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: arniston
License: GPL-2.0-or-later
*/

/* ---------- tokens (same values as the brand guidelines) ---------- */
:root{
  --bg:#F6F8F9; --surface:#FFFFFF; --text:#2B3A42; --muted:#5A6A72; --rule:#D9E1E3;
  --ink:#0F3B57; --ink-2:#164A6B; --ink-text:#F6F8F9; --ink-muted:#A9C2CC; --ink-rule:#2A5775;
  --accent:#63A79B; --accent-btn:#2F6F76; --accent-btn-hover:#255A60; --accent-text:#2F6F76; --accent-on-ink:#7FC0B4;
  --focus:#2F6F76; --error:#A0561A;
  --font-display:"Archivo","Archivo Narrow","Helvetica Neue",Arial,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --maxw:1120px; --gutter:clamp(16px, 4vw, 40px); --measure:68ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E1A22; --surface:#14242E; --text:#E6ECEE; --muted:#A9B8BF; --rule:#26404E;
    --ink:#0B2536; --ink-2:#12344A; --ink-rule:#214A63;
    --accent-text:#7FC0B4; --focus:#7FC0B4; --error:#E8A86A;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1A22; --surface:#14242E; --text:#E6ECEE; --muted:#A9B8BF; --rule:#26404E;
  --ink:#0B2536; --ink-2:#12344A; --ink-rule:#214A63;
  --accent-text:#7FC0B4; --focus:#7FC0B4; --error:#E8A86A;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
main{overflow-x:clip; display:block}
a{color:var(--accent-text); text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
img{max-width:100%; height:auto}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0; text-wrap:balance; letter-spacing:-0.005em}
h1{font-size:clamp(2.1rem, 5vw, 3.6rem); font-stretch:112%}
h2{font-size:clamp(1.5rem, 3vw, 2.2rem); font-stretch:110%}
h3{font-size:1.15rem; font-stretch:105%}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
.eyebrow{font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted)}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip-link{position:absolute; left:-999px; top:8px; background:var(--accent-btn); color:#fff; padding:8px 12px; border-radius:4px; z-index:60}
.skip-link:focus{left:8px}

/* ---------- buttons ---------- */
.btn,.wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:500; font-size:0.95rem; line-height:1.2; text-decoration:none;
  padding:11px 18px; border-radius:4px; border:1px solid var(--accent-btn); cursor:pointer;
  background:var(--accent-btn); color:#fff; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover,.wp-block-button__link:hover{background:var(--accent-btn-hover); border-color:var(--accent-btn-hover); color:#fff}
.btn-line,.is-style-outline .wp-block-button__link{background:transparent; color:var(--text); border-color:var(--rule)}
.btn-line:hover,.is-style-outline .wp-block-button__link:hover{background:transparent; color:var(--text); border-color:var(--text)}
.btn-ghost{background:transparent; color:var(--ink-text); border-color:var(--ink-rule)}
.btn-ghost:hover{background:transparent; border-color:var(--ink-text)}
.wp-block-buttons{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0}
.wp-block-button{margin:0}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--rule)}
.admin-bar .site-header{top:32px}
@media (max-width:782px){ .admin-bar .site-header{top:0} }
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px; position:relative}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-family:var(--font-display); font-stretch:112%; font-size:1.2rem; letter-spacing:-0.01em; white-space:nowrap}
.brand .mark{width:38px; height:38px; flex:none; display:block}
.brand .a{font-weight:700} .brand .b{font-weight:400}
:root[data-theme="dark"] .site-header .brand .mark{background:#F6F8F9; border-radius:50%; padding:3px}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .site-header .brand .mark{background:#F6F8F9; border-radius:50%; padding:3px} }
.primary-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:22px; align-items:center}
.primary-nav a{white-space:nowrap; text-decoration:none; font-size:0.94rem; color:var(--muted); padding:6px 0; border-bottom:2px solid transparent; display:block}
.primary-nav a:hover{color:var(--text)}
.primary-nav .current-menu-item > a,.primary-nav .current-menu-ancestor > a,.primary-nav .current_page_item > a,.primary-nav .current_page_ancestor > a{color:var(--text); border-bottom-color:var(--accent)}
.primary-nav .nav-cta-li{display:none}
.menu-btn{display:none; background:none; border:1px solid var(--rule); border-radius:4px; padding:8px 12px; font:inherit; font-size:0.9rem; color:var(--text); cursor:pointer}
@media (max-width:1080px){ .primary-nav ul{gap:16px} .primary-nav a{font-size:0.9rem} }
@media (max-width:960px){
  .menu-btn{display:inline-block}
  .site-header .cta{display:none}
  .primary-nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--surface); border-bottom:1px solid var(--rule); padding:8px var(--gutter) 16px}
  .primary-nav.open{display:block}
  .primary-nav ul{flex-direction:column; align-items:stretch; gap:0}
  .primary-nav a{padding:12px 0; border-bottom:1px solid var(--rule); font-size:1rem}
  .primary-nav .current-menu-item > a,.primary-nav .current_page_item > a,.primary-nav .current-menu-ancestor > a,.primary-nav .current_page_ancestor > a{border-bottom-color:var(--rule); color:var(--accent-text); box-shadow:inset 3px 0 0 var(--accent); padding-left:10px}
  .primary-nav .nav-cta-li{display:block}
  .primary-nav li:last-child a{border-bottom:none}
}

/* ---------- hero (front page) ---------- */
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--ink); color:var(--ink-text); padding-block:clamp(64px, 10vw, 136px) clamp(72px, 10vw, 128px)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%; z-index:-2}
.hero-shade{position:absolute; inset:0; z-index:-1; background:
  linear-gradient(90deg, rgba(15,59,87,.95) 0%, rgba(15,59,87,.88) 42%, rgba(15,59,87,.55) 72%, rgba(15,59,87,.30) 100%),
  linear-gradient(180deg, rgba(15,59,87,.30) 0%, rgba(15,59,87,0) 35%, rgba(15,59,87,.60) 100%)}
@media (max-width:860px){ .hero-shade{background:linear-gradient(180deg, rgba(15,59,87,.90) 0%, rgba(15,59,87,.84) 100%)} }
.hero-copy{max-width:660px}
.hero .eyebrow{color:var(--ink-muted); display:block; margin-bottom:18px}
.hero .lead{font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--ink-muted); margin:22px 0 0; max-width:56ch}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.credit{position:absolute; right:var(--gutter); bottom:10px; font-family:var(--font-mono); font-size:0.68rem; color:rgba(238,240,243,.62); letter-spacing:.02em; text-align:right; max-width:calc(100% - 2*var(--gutter))}
.credit a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(238,240,243,.3)}

/* ---------- inner page title band ---------- */
.page-band{background:var(--ink); color:var(--ink-text); padding-block:clamp(48px, 7vw, 88px) clamp(40px, 6vw, 72px)}
.page-band .eyebrow{color:var(--ink-muted); display:block; margin-bottom:14px}
.page-band .eyebrow a{color:inherit; text-decoration:none}
.page-band .eyebrow a:hover{color:var(--ink-text)}
.page-band .lead{color:var(--ink-muted); font-size:clamp(1.05rem, 1.5vw, 1.2rem); margin:18px 0 0; max-width:60ch}
.subnav{background:var(--surface); border-bottom:1px solid var(--rule)}
.subnav ul{list-style:none; margin:0; padding:0; display:flex; gap:6px 26px; flex-wrap:wrap}
.subnav a{display:block; padding:14px 0; text-decoration:none; color:var(--muted); font-size:0.94rem; border-bottom:2px solid transparent}
.subnav a:hover{color:var(--text)}
.subnav .current a{color:var(--text); border-bottom-color:var(--accent)}

/* ---------- page content ---------- */
.entry{max-width:var(--maxw); margin:0 auto; padding:clamp(40px, 6vw, 80px) var(--gutter) clamp(56px, 8vw, 104px)}
.entry > *{margin-top:0; margin-bottom:0}
.entry > * + *{margin-top:18px}
.entry > :where(p,ul,ol,h2,h3,h4,blockquote){max-width:var(--measure)}
.entry > h2,.entry .band > h2{margin-top:clamp(40px, 6vw, 64px); padding-top:18px; position:relative}
.entry > h2::before,.entry .band > h2::before{content:""; position:absolute; top:0; left:0; width:48px; height:3px; background:var(--accent)}
.entry > h2:first-child,.entry .band > h2:first-child{margin-top:0}
.entry > .eyebrow + h2,.entry .band > .eyebrow + h2,.entry .split-text > .eyebrow + h2{margin-top:10px; padding-top:0}
.entry > .eyebrow + h2::before,.entry .band > .eyebrow + h2::before{display:none}
.entry > h3{margin-top:32px}
:where(.entry p){margin:0}
.entry .lede{font-size:1.15rem; color:var(--text); font-weight:500}
.entry .tagline{font-family:var(--font-display); font-stretch:110%; font-weight:600; font-size:clamp(1.2rem, 2.2vw, 1.5rem); line-height:1.25; color:var(--ink); border-left:3px solid var(--accent); padding:4px 0 4px 18px; margin-top:36px!important}
:root[data-theme="dark"] .entry .tagline{color:var(--text)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .entry .tagline{color:var(--text)} }
.entry ul:not(.no-marks){list-style:none; padding:0}
.entry ul:not(.no-marks) > li{padding:9px 0 9px 26px; border-bottom:1px solid var(--rule); position:relative; margin:0}
.entry ul:not(.no-marks) > li:first-child{border-top:1px solid var(--rule)}
.entry ul:not(.no-marks) > li::before{content:""; position:absolute; left:5px; top:19px; width:8px; height:8px; background:var(--accent); transform:rotate(45deg)}
.entry figure{margin:0}
.entry .wp-block-image{margin-top:clamp(28px, 4vw, 44px)!important}
.entry .wp-block-image img{display:block; width:100%; aspect-ratio:21/9; object-fit:cover; background:var(--rule)}
@media (max-width:700px){ .entry .wp-block-image img{aspect-ratio:16/10} }
.entry .wp-block-image figcaption,.wp-element-caption{font-family:var(--font-mono); font-size:0.72rem; color:var(--muted); letter-spacing:.02em; margin-top:8px}
.entry figcaption a{color:inherit}
.entry .wp-block-separator{border:0; border-top:1px solid var(--rule); margin-block:40px}

/* full-width bands inside page content (front page sections) */
/* the inline padding mirrors the negative margin exactly, so band content stays on the .entry grid
   even when 100vw includes a visible scrollbar (desktop Windows) */
.entry .band{margin-inline:calc(50% - 50vw); padding:clamp(56px, 8vw, 96px) calc(50vw - 50%)}
.entry > .band:first-child{margin-top:calc(-1 * clamp(40px, 6vw, 80px))}
.entry > .band:last-child{margin-bottom:calc(-1 * clamp(56px, 8vw, 104px))}
.entry > .band + .band{margin-top:0}
.entry .band > *{margin:0}
.entry .band > * + *{margin-top:18px}
.entry .band > :where(p,ul,h2,h3){max-width:var(--measure)}
.band-surface{background:var(--surface); border-block:1px solid var(--rule)}
.band-ink{background:var(--ink); color:var(--ink-text)}
.band-ink .eyebrow{color:var(--ink-muted)}
.band-ink p{color:var(--ink-muted)}
.entry .band-ink h2::before{background:var(--accent-on-ink)}
.band-ink .wp-block-button__link{background:#F6F8F9; color:#0F3B57; border-color:#F6F8F9}
.band-ink .wp-block-button__link:hover{background:#FFFFFF; color:#0F3B57}
.band-ink .is-style-outline .wp-block-button__link{background:transparent; color:var(--ink-text); border-color:var(--ink-rule)}
.band-ink .is-style-outline .wp-block-button__link:hover{border-color:var(--ink-text)}
.entry .band > .wp-block-image img{aspect-ratio:21/9}

/* two-part intro: text + photo */
.entry .split{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px, 5vw, 64px); align-items:start}
.entry .split > *{margin:0}
.entry .split .wp-block-image{margin-top:0!important}
.entry .split .wp-block-image img{aspect-ratio:4/5}
.entry .split-text > * + *{margin-top:16px}
.entry .split-text > .eyebrow + h2{margin-top:10px}
@media (max-width:860px){ .entry .split{grid-template-columns:1fr} .entry .split .wp-block-image img{aspect-ratio:16/10} }

/* cards */
.entry .cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap:1px; padding:1px; max-width:none!important; margin-top:clamp(24px, 4vw, 40px)}
.entry .cards > .card{background:var(--surface); padding:26px 24px 28px; margin:0; box-shadow:0 0 0 1px var(--rule)}
.entry .cards > .card > * + *{margin-top:10px}
.entry .cards h3{font-size:1.1rem}
.entry .cards p{color:var(--muted); font-size:0.96rem}
.entry .cards .more a{font-weight:500; text-decoration:none}
.entry .cards .more a:hover{text-decoration:underline}
.band-surface .cards > .card{background:var(--bg)}

/* in-page contents (built by site.js from headings with anchors) */
.toc{border:1px solid var(--rule); background:var(--surface); padding:18px 20px; max-width:var(--measure)}
.toc .eyebrow{margin:0 0 8px}
.toc ol{margin:0; padding-left:1.3em; display:grid; gap:4px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ---------- company details, map ---------- */
.company-details{display:grid; gap:0; border:1px solid var(--rule); background:var(--surface); max-width:var(--measure)}
.company-details > div{padding:16px 20px; border-bottom:1px solid var(--rule); display:grid; gap:4px}
.company-details > div:last-child{border-bottom:0}
.company-details .k{font-family:var(--font-mono); font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.company-details .v{white-space:pre-line}
.admin-hint{font-family:var(--font-mono); font-size:0.8rem; color:var(--error); border:1px dashed var(--error); padding:10px 12px; max-width:var(--measure)}
.map{position:relative; aspect-ratio:16/9; border:1px solid var(--rule); background:var(--rule)}
.map iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- forms ---------- */
.site-form{display:grid; gap:18px; max-width:760px; background:var(--surface); border:1px solid var(--rule); padding:clamp(18px, 3vw, 32px)}
.site-form .row{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.site-form .row-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
@media (max-width:600px){ .site-form .row,.site-form .row-3{grid-template-columns:1fr} }
.site-form label{display:block; font-size:0.9rem; color:var(--muted)}
.site-form label > input,.site-form label > select,.site-form label > textarea{display:block; margin-top:6px}
.site-form .req{color:var(--accent-text)}
.site-form input,.site-form select,.site-form textarea{font:inherit; font-size:0.98rem; color:var(--text); background:var(--surface); border:1px solid var(--rule); border-radius:4px; padding:10px 12px; width:100%; min-width:0}
.site-form input:hover,.site-form select:hover,.site-form textarea:hover{border-color:var(--muted)}
.site-form [aria-invalid="true"]{border-color:var(--error)}
.site-form textarea{min-height:120px; resize:vertical}
.site-form fieldset{border:1px solid var(--rule); border-radius:4px; padding:12px 14px 6px; margin:0; min-width:0}
.site-form legend{font-size:0.9rem; color:var(--muted); padding:0 6px}
.site-form .checks{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px 14px}
.site-form .checks label{display:flex; align-items:center; gap:8px; color:var(--text); font-size:0.94rem; padding:6px 0}
.site-form .checks input{width:16px; height:16px; margin:0; accent-color:var(--accent-btn); flex:none}
@media (max-width:600px){ .site-form .checks{grid-template-columns:1fr 1fr} }
.site-form .hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.site-form .form-foot{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.site-form .form-foot small{color:var(--muted)}
.field-error{display:block; color:var(--error); font-size:0.85rem; margin-top:4px}
.form-notice{border:1px solid var(--accent); background:var(--surface); padding:16px 20px; max-width:760px}
.form-notice.is-error{border-color:var(--error)}
.form-notice p{margin:0}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:var(--ink-text); padding-block:clamp(44px, 6vw, 72px) 28px}
.site-footer .grid{display:grid; grid-template-columns:minmax(0,5fr) repeat(3, minmax(0,3fr)); gap:32px}
.site-footer h2{font-family:var(--font-mono); font-weight:500; font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 14px; font-stretch:100%}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:0.94rem}
.site-footer a{text-decoration:none; color:var(--ink-text)}
.site-footer a:hover{text-decoration:underline}
.site-footer .brand{color:var(--ink-text)}
.site-footer .mark-ring{width:46px; height:46px; border-radius:50%; background:#F6F8F9; display:grid; place-items:center; flex:none}
.site-footer .mark-ring .mark{width:36px; height:36px}
.site-footer .desc{color:var(--ink-muted); margin:14px 0 0; max-width:40ch; font-size:0.95rem}
.site-footer .addr{white-space:pre-line; color:var(--ink-muted)}
.site-footer .legal{margin-top:40px; padding-top:20px; border-top:1px solid var(--ink-rule); display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; font-size:0.84rem; color:var(--ink-muted)}
@media (max-width:860px){ .site-footer .grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .site-footer .grid{grid-template-columns:1fr} }

/* ---------- 404 ---------- */
.not-found{padding-block:clamp(64px, 10vw, 120px)}
.not-found p{margin:16px 0 0; color:var(--muted)}