/*
Theme Name: Port of Stenungsund
Theme URI: https://portofstenungsund.se
Author: Wallmander & Co
Author URI: https://wallmanderco.se
Description: Blocktema för Port of Stenungsund. ISPS-säkerhetsnivån styrs från Inställningar → Port security och visas i baren på varje sida.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
Version: 1.1.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: port-of-stenungsund
Tags: full-site-editing, block-theme, one-column
*/

/* ==========================================================================
   Endast det som theme.json inte kan uttrycka. Inga hårdkodade färger eller
   mått som finns som token – använd var(--wp--preset--…).
   ========================================================================== */

/* --- Typografiska presets ---------------------------------------------------
   theme.json är källan, men WP Engines objektcache kan hålla kvar en tidigare
   genererad global stilmall (wp_get_global_stylesheet). Vi upprepar därför
   storlekarna här så att temat ser likadant ut oavsett cacheläge. */
:root,body{
  --wp--preset--font-size--small:0.8125rem;
  --wp--preset--font-size--medium:1.0625rem;
  --wp--preset--font-size--large:1.25rem;
  --wp--preset--font-size--x-large:clamp(1.625rem, 3vw, 2rem);
  --wp--preset--font-size--xx-large:clamp(2.375rem, 6vw, 4.75rem);
}
body{font-size:var(--wp--preset--font-size--medium)}

/* --- Sidhuvud över hero ---------------------------------------------------- */
/* Sidhuvudet följer designens sidmarginaler, inte innehållskolumnen:
   loggan ska ligga vid sidkanten och menyn vid motsatt kant. */
.pos-header{position:absolute;inset:0 auto auto 0;width:100%;z-index:30}
/* Luft över loggan enligt originaldesignen (44px vid 1600px bredd).
   !important eftersom sidhuvudets padding ligger som inline-stil i mallen. */
.pos-header{padding-top:40px !important}
.pos-header > .wp-block-group{
  max-width:1400px;margin-inline:auto;
  padding-inline:clamp(24px,3vw,48px);
}
.pos-header .wp-block-site-logo img{width:190px;height:auto}
.pos-header .wp-block-navigation{gap:38px;margin-top:14px}
/* Kärnan skriver ut länkfärger för block med !important, därför krävs det här. */
.pos-header .wp-block-navigation a{
  color:#fff !important;text-transform:uppercase;
  font-size:var(--wp--preset--font-size--small);letter-spacing:.13em;font-weight:600;
  padding-bottom:4px;border-bottom:2px solid transparent;text-decoration:none;
}
.pos-header .wp-block-navigation a:hover,
.pos-header .wp-block-navigation .current-menu-item a{border-bottom-color:#fff !important}
.pos-header .wp-block-navigation__responsive-container-open,
.pos-header .wp-block-navigation__responsive-container-close{color:var(--wp--preset--color--base)}

/* Blockgapet lägger 16px ovanför heron. Marginalen kollapsar ut genom
   template part och body och syns som en vit list överst på sidan. */
.wp-site-blocks > *:first-child,
.pos-site-top,
.pos-site-top > *,
.pos-hero,
.pos-isps{margin-block-start:0}

/* --- Hero ------------------------------------------------------------------ */
.pos-hero{min-height:520px}
.pos-hero .wp-block-cover__inner-container{text-align:center}
.pos-hero .pos-hero__eyebrow{
  text-transform:uppercase;letter-spacing:.22em;font-size:1.125rem;margin:0 0 6px;
  color:var(--wp--preset--color--base);text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.pos-hero h1{color:var(--wp--preset--color--base);margin:0;text-shadow:0 2px 20px rgba(0,0,0,.35)}

/* --- ISPS-bar (block: pos/isps-bar) ---------------------------------------- */
.pos-isps{padding-top:34px}
/* Baren ligger på rotnivå i sidhuvudet och måste därför själv hålla
   innehållsbredden – annars går plattan kant i kant. */
.pos-isps__inner{
  max-width:1120px;margin-left:auto;margin-right:auto;

  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--wp--preset--color--navy);color:var(--wp--preset--color--base);
  padding:20px 34px;font-weight:700;font-size:var(--wp--preset--font-size--large);line-height:1.35;
}
.pos-isps__text{flex:1 1 260px;min-width:0}
.pos-isps__level{color:var(--wp--preset--color--base);font-weight:700}
/* Plattan är alltid hamnblå och siffran vit – indikatorn bär allvarsgraden. */
.pos-isps__dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 4px rgba(255,255,255,.15)}
.pos-isps--1 .pos-isps__dot{background:#2e8b57}
.pos-isps--2 .pos-isps__dot{background:#e8a300}
.pos-isps--3 .pos-isps__dot{background:#ff5b5b}
.pos-isps__meta{display:block;width:100%;font-weight:400;font-size:0.875rem;color:#a9c2cc;letter-spacing:.02em}

/* --- Sektionsrubrik med linje ---------------------------------------------- */
.pos-section-title{margin-bottom:14px}
.pos-section-title::after{
  content:"";display:block;width:400px;max-width:100%;height:1px;
  background:var(--wp--preset--color--line);margin-top:18px;
}

/* --- Kontaktblock ---------------------------------------------------------- */
.pos-facility{margin-top:30px}
.pos-facility p{margin:0}
.pos-facility a{color:inherit;text-decoration:none}
.pos-facility a:hover,.pos-facility a:focus-visible{text-decoration:underline;text-underline-offset:3px}
/* Fallgrop 8: block-gap på flow-grupper knäcker de täta kontaktkolumnerna. */
.pos-facility .wp-block-group.pos-facility__col > :not(:first-child){margin-block-start:0}

/* --- Sidfot ---------------------------------------------------------------- */
.pos-footer{position:relative;color:var(--wp--preset--color--base)}
.pos-footer::after{content:"";position:absolute;inset:0;background:rgba(0,50,70,.55);z-index:0}
.pos-footer > .wp-block-group{position:relative;z-index:1}
.pos-footer__info{
  font-size:var(--wp--preset--font-size--small);font-weight:700;letter-spacing:.04em;
  line-height:1.9;text-transform:uppercase;margin:0;
}
.pos-footer__info a{color:var(--wp--preset--color--base);text-transform:none;font-weight:600;text-decoration:none}
.pos-footer__info a:hover{text-decoration:underline}
.pos-footer .wp-block-image img{width:190px;height:auto}

/* --- 404 ------------------------------------------------------------------- */
.pos-404__code{font-size:5rem;font-weight:700;line-height:1;color:var(--wp--preset--color--navy);margin:0}

/* --- Tillgänglighet -------------------------------------------------------- */
:where(a,button,input,summary):focus-visible{outline:3px solid #e30613;outline-offset:2px}


/* --- Mobilmeny -------------------------------------------------------------
   Utfällbar panel från höger som täcker 90% av bredden. Kärnans overlay är
   vit och heltäckande som standard – utan det här blir vita länkar osynliga. */
@keyframes pos-menu-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.wp-block-navigation__responsive-container.is-menu-open{
  left:auto;right:0;width:90%;max-width:520px;
  background-color:var(--wp--preset--color--navy);color:var(--wp--preset--color--base);
  padding:28px 24px 36px;box-shadow:-18px 0 40px rgba(0,0,0,.28);
  animation:pos-menu-in .28s ease-out both;overflow-y:auto;
}
@media (prefers-reduced-motion:reduce){
  .wp-block-navigation__responsive-container.is-menu-open{animation:none}
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  color:var(--wp--preset--color--base);border-bottom:0;font-size:1.25rem;letter-spacing:.1em;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:18px}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-close svg{color:var(--wp--preset--color--base);fill:currentColor}
.pos-header .wp-block-navigation__responsive-container-open svg{fill:var(--wp--preset--color--base)}
/* Loggan syns kvar när menyn är öppen. */
.wp-block-navigation__responsive-container.is-menu-open::before{
  content:"";position:absolute;top:26px;left:24px;width:128px;height:98px;
  background:url(assets/images/logo-white.png) no-repeat left top/contain;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  display:flex;flex-direction:column;padding-top:132px;
}
/* Kontaktuppgifterna hålls ihop med menyvalen, avskilda med en hårfin linje.
   :first-of-type matchar första li:n i listan – inte första kontaktraden –
   därför sätts avskiljaren på kontaktraden som följer på ett vanligt menyval. */
.is-menu-open .wp-block-navigation__container li:not(.pos-nav-contact) + .pos-nav-contact{
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.25);
}
.is-menu-open .wp-block-navigation__container .pos-nav-contact + .pos-nav-contact{
  margin-top:-28px;
}
.wp-block-navigation__responsive-container.is-menu-open .pos-nav-contact a{
  font-size:.9375rem;letter-spacing:.02em;opacity:.85;text-transform:none;
}

/* Hamburgaren tar över redan under 900px – logga och menyval trängs annars. */
@media (max-width:900px){
  .pos-header .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  .pos-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
}
/* Kontaktraderna hör bara hemma i den utfällda menyn, aldrig i radmenyn. */
.pos-header .pos-nav-contact{display:none}
.wp-block-navigation__responsive-container.is-menu-open .pos-nav-contact{display:block}

/* --- Responsivt ------------------------------------------------------------ */
@media (max-width:1168px){
  .pos-isps{padding-left:24px;padding-right:24px}
}
@media (max-width:820px){
  .pos-header{padding-top:24px !important}
  .pos-header .wp-block-site-logo img{width:140px}
  .pos-hero{min-height:400px}
  .pos-isps__inner{padding:16px 20px;font-size:var(--wp--preset--font-size--medium)}
  .pos-facility .wp-block-columns{gap:4px}
}