/* ==========================================================================

    Pappakoden — supplementary styles

    Loads on front end AND editor. Handles what theme.json/variations can't

    reach, plus targeted overrides of classic Storefront defaults.

    Tokens come from theme.json (--wp--preset--color--*, --wp--custom--*).

    ========================================================================== */



  /* ---- Local token aliases (shorter to read; all resolve to theme.json) ---- */

  :root{

    --pk-navy: var(--wp--preset--color--navy);

    --pk-teal-block: var(--wp--preset--color--teal-block);

    --pk-teal-text: var(--wp--preset--color--teal-text);

    --pk-pale: var(--wp--preset--color--pale);

    --pk-yellow: var(--wp--preset--color--yellow);

    --pk-yellow-tx: var(--wp--preset--color--yellow-tx);

    --pk-white: var(--wp--preset--color--white);

    --pk-ink: var(--wp--preset--color--ink);

    --pk-off: var(--wp--preset--color--off);

    --pk-red: var(--wp--preset--color--red);

    --pk-line-d: var(--wp--custom--color--line-on-dark);

    --pk-line-l: var(--wp--custom--color--line-on-light);

    --pk-radius-card: var(--wp--custom--radius--card);

    --pk-radius-btn: var(--wp--custom--radius--button);

    --pk-muted-d: var(--wp--custom--color--muted-on-dark);

    --pk-muted-l: var(--wp--custom--color--muted-on-light);

  }



  /* ==========================================================================

    1 · EYEBROW  — small uppercase label with the red tick

    Apply by adding the class "pk-eyebrow" to a Paragraph block.

    ========================================================================== */

  .pk-eyebrow{

    display:inline-flex; align-items:center; gap:10px;

    font-family: var(--wp--preset--font-family--body);

    font-size:.75rem; font-weight:700; letter-spacing:.15em;

    text-transform:uppercase; margin:0 0 .6rem;

    color: var(--pk-teal-text);

  }

  .pk-eyebrow::before{

    content:""; width:22px; height:2px; border-radius:2px;

    background: var(--pk-red); flex:0 0 auto;

  }

  .pk-eyebrow.has-text-align-center {

    display:flex; 

    justify-content: center;

  }

  /* On dark sections the eyebrow text turns off-white (tick stays red) */

  .is-style-section-navy .pk-eyebrow,

  .is-style-section-teal .pk-eyebrow{ color: var(--pk-off); }

  /* STIAN */
  /* p {
    font-size: 15px;
    line-height: 1.75;
  }
  */
  .has-large-font-size{
    font-size: 1em !important;
  }

  p.wp-block-paragraph {
    font-size: 1em !important;
    line-height: 1.75;
  }

  .is-style-section-navy .wp-block-paragraph,
  .is-style-card-navy .wp-block-paragraph {
    color: var(--pk-white);
  }

  .has-white-color {
    color: inherit !important;
}

header.entry-header {
  display: none;
}

.storefront-primary-navigation{
  margin: unset !important;
  margin-left: auto !important;
}

.site-header{
  margin-bottom: 0 !important;
}

.hentry,
div#primary.content-area,
main#main.site-main{
  margin-bottom: 0 !important;
}


  /* ==========================================================================

    2 · EMPHASIS word inside a heading

    Wrap the word in an inline span with class "pk-em".

    Light sections -> teal-text; dark sections -> bright yellow.

    ========================================================================== */

  .pk-em{ color: var(--pk-teal-text); font-weight:700; }

  .is-style-section-navy .pk-em,

  .is-style-section-teal .pk-em{ color: var(--pk-yellow-tx); }



  /* ==========================================================================

    3 · FRAMED IMAGE  — teal panel behind the book cover

    Apply class "pk-frame" to a Group that wraps an Image block.

    ========================================================================== */

  .pk-frame{

    background: var(--pk-teal-block);

    border-radius: var(--pk-radius-card);

    padding: clamp(1.75rem, 4vw, 2.875rem);

    display:flex; justify-content:center;

  }

  .pk-frame img{

    width:min(72%, 300px); height:auto; border-radius:3px;

    box-shadow:0 30px 60px -22px rgba(0,0,0,.55);

  }



  /* ==========================================================================

    4 · FAQ — core/details block styled as accordion

    Apply class "pk-faq" to a Group wrapping core/details blocks.

    ========================================================================== */

  .pk-faq .wp-block-details{

    border-bottom:1px solid var(--pk-line-l);

    padding:1.1rem 0;

  }

  .pk-faq .wp-block-details summary{

    font-family: var(--wp--preset--font-family--heading);

    font-size:1.1875rem; font-weight:600; cursor:pointer;

    list-style:none; display:flex; justify-content:space-between;

    align-items:center; color:var(--pk-ink);

  }

  .pk-faq .wp-block-details summary::-webkit-details-marker{ display:none; }

  .pk-faq .wp-block-details summary::after{

    content:"+"; color:var(--pk-teal-text); font-size:1.5rem; font-weight:400; line-height:1;

  }

  .pk-faq .wp-block-details[open] summary::after{ content:"\2013"; }

  .pk-faq .wp-block-details > *:not(summary){

    margin-top:.75rem; color:var(--wp--custom--color--muted-on-light); font-size:1rem;

  }



  /* ==========================================================================

    5 · STORY / QUOTE card tweaks

    ========================================================================== */

  .pk-story{ display:flex; flex-direction:column; gap:.875rem; height:100%; }

  .pk-story .pk-story-q{

    font-family: var(--wp--preset--font-family--heading);

    font-size:1.125rem; line-height:1.4;

  }

  .pk-story .pk-story-who{

    font-size:.8125rem; font-weight:600; margin-top:auto;

    color: var(--pk-teal-text);

  }

  .is-style-card-teal .pk-story-who{ color: var(--pk-yellow-tx); }

  .pk-avatar{ width:42px; height:42px; border-radius:50%; background:var(--pk-pale); }

  .is-style-card-teal .pk-avatar{ background:rgba(238,242,239,.2); }



  /* ==========================================================================

    6 · PRICE list (checkmarks) inside a navy card

    Apply class "pk-pricelist" to a List block.

    ========================================================================== */

  .pk-pricelist{ list-style:none; margin:1.4rem 0 1.6rem; padding:0; }

  .pk-pricelist li{

    display:flex; gap:.625rem; padding:.55rem 0;

    border-top:1px solid var(--pk-line-d); font-size:.9375rem;

  }

  .pk-pricelist li::before{ content:"\2713"; color:var(--pk-yellow-tx); font-weight:700; }

  .pk-price{

    font-family: var(--wp--preset--font-family--heading);

    font-size:2.875rem; font-weight:600; color:var(--pk-yellow-tx);

    line-height:1; margin:.375rem 0 .25rem;

  }

  .pk-price small{ font-size:.9375rem; color:var(--wp--custom--color--muted-on-dark);

    font-family:var(--wp--preset--font-family--body); font-weight:400; }



  /* ==========================================================================

    7 · BREVO FORM skinning  ("simple HTML form" embed)

    Brevo wraps its form in .sib-form / #sib-form. We restyle to match.

    Drop the Brevo embed inside a Group with class "pk-form".

    NOTE: Brevo ships inline styles; some rules need the extra weight, hence

    the scoping under .pk-form and a few !important on stubborn props.

    ========================================================================== */

  .pk-form .sib-form,

  .pk-form #sib-form{

    padding:0 !important; background:transparent !important;

  }

  .pk-form .sib-form-block{ padding:0 !important; }

  /* Inputs */

  .pk-form input[type=text],

  .pk-form input[type=email],

  .pk-form textarea,

  .pk-form select{

    width:100%; font-family:var(--wp--preset--font-family--body);

    font-size:1rem; padding:.75rem .9rem;

    border:1.5px solid var(--pk-line-l); border-radius:7px;

    background:#fff; color:var(--pk-ink); box-shadow:none !important;

  }

  .pk-form input:focus, .pk-form textarea:focus, .pk-form select:focus{

    outline:none; border-color:var(--pk-teal-block) !important;

  }

  .pk-form textarea{ min-height:130px; resize:vertical; }

  .pk-form label, .pk-form .entry__label{

    font-size:.875rem !important; font-weight:600 !important;

    color:var(--pk-ink) !important; margin-bottom:.4rem !important;

  }

  /* Submit button -> teal-block pill */

  .pk-form .sib-form-block__button,

  .pk-form button[type=submit]{

    background:var(--pk-teal-block) !important; color:var(--pk-off) !important;

    font-family:var(--wp--preset--font-family--body) !important;

    font-weight:600 !important; font-size:1rem !important;

    border:0 !important; border-radius:26px !important;

    padding:.85rem 1.75rem !important; cursor:pointer;

    box-shadow:none !important; transition:background .2s;

  }

  .pk-form .sib-form-block__button:hover,

  .pk-form button[type=submit]:hover{ background:#327079 !important; }

  /* Consent / helper text */

  .pk-form .sib-text-form-block,

  .pk-form .entry__specification{

    color:var(--wp--custom--color--muted-on-light) !important; font-size:.875rem !important;

  }

  /* Newsletter variant: inline single-field row on dark footer.

    Add class "pk-form--inline pk-form--on-dark" to the wrapper. */

  .pk-form--on-dark input[type=email]{

    background:rgba(238,242,239,.08); color:var(--pk-off);

    border-color:var(--pk-line-d);

  }

  .pk-form--on-dark input::placeholder{ color:rgba(238,242,239,.65); }

  .pk-form--on-dark label{ color:var(--pk-off) !important; }

  .pk-form--on-dark .sib-form-block__button,

  .pk-form--on-dark button[type=submit]{

    background:var(--pk-yellow) !important; color:var(--pk-navy) !important;

  }

  .pk-form--on-dark .sib-form-block__button:hover{ background:#ece6a0 !important; }



  /* ==========================================================================

    8 · FOUNDATION OVERRIDES (reclaim the system from classic Storefront)

    Storefront enqueues its own fonts, text colours and button styles that can

    beat theme.json on the FRONT END. These targeted rules reassert the

    Pappakoden system. Scoped to content + buttons so we don't touch admin bar

    or unrelated theme chrome. Tokens come from theme.json.

    ========================================================================== */



  /* --- 8a · Base text + body font ------------------------------------------- */

  body,

  .site-content,

  .page-content,

  .entry-content{

    font-family: var(--wp--preset--font-family--body);

    color: var(--pk-ink);

  }



  /* --- 8b · Headings: Lora, ink, on content only (not widget/admin chrome) --- */

  .entry-content h1, .entry-content h2, .entry-content h3,

  .entry-content h4, .entry-content h5, .entry-content h6,

  .wp-block-heading{

    font-family: var(--wp--preset--font-family--heading);

    color: var(--pk-ink);

    line-height: 1.15;

    letter-spacing: -0.005em;

  }

  /* Don't force a single weight — let heading levels/blocks keep their weight,

    but give a sensible default where none is set. */

  .wp-block-heading{ font-weight: 600; }

  /* On dark/teal sections headings are off-white (variations set this too; this

    is the front-end safety net in case Storefront's colour wins). */

  .is-style-section-navy :is(h1,h2,h3,h4,.wp-block-heading),

  .is-style-section-teal :is(h1,h2,h3,h4,.wp-block-heading),

  .is-style-card-navy :is(h1,h2,h3,h4,.wp-block-heading),

  .is-style-card-teal :is(h1,h2,h3,h4,.wp-block-heading){

    color: var(--pk-off);

  }



  /* --- 8c · Links in content ------------------------------------------------ */

  .entry-content a:not(.wp-block-button__link):not(.wp-element-button){

    color: var(--pk-teal-text);

    text-decoration: none;

  }

  .entry-content a:not(.wp-block-button__link):not(.wp-element-button):hover{

    text-decoration: underline;

  }

  .is-style-section-navy a:not(.wp-block-button__link),

  .is-style-section-teal a:not(.wp-block-button__link){

    color: var(--pk-off);

  }



  /* ==========================================================================

    8d · BUTTON SYSTEM  — the core fix

    theme.json sets the DEFAULT button; Storefront fights it on the front end.

    We reassert every button state here at a specificity Storefront can't beat

    (.wp-block-button .wp-block-button__link is 0,3,0 — higher than SF's rules).

    ========================================================================== */



  /* Shared shape + type for ALL block buttons (default + every variation) */

  .wp-block-button .wp-block-button__link,

  .wp-block-button .wp-element-button{

    font-family: var(--wp--preset--font-family--body) !important;

    font-weight: 600 !important;

    font-size: var(--wp--preset--font-size--medium);

    line-height: 1.2;

    border-radius: var(--pk-radius-btn) !important;

    padding: 0.85rem 1.75rem !important;

    border: 1.5px solid transparent;

    text-decoration: none;

    transition: background-color .2s, color .2s, border-color .2s;

  }



  /* Default (no variation chosen) = teal-block, off-white label */

  .wp-block-button:not([class*="is-style-btn-"]) .wp-block-button__link{

    background-color: var(--pk-teal-block) !important;

    color: var(--pk-off) !important;

  }

  .wp-block-button:not([class*="is-style-btn-"]) .wp-block-button__link:hover{

    background-color: #327079 !important;

  }



  /* Variation: Yellow */

  .wp-block-button.is-style-btn-yellow .wp-block-button__link{

    background-color: var(--pk-yellow) !important; color: var(--pk-navy) !important;

  }

  .wp-block-button.is-style-btn-yellow .wp-block-button__link:hover{

    background-color: #ece6a0 !important; color: var(--pk-navy) !important;

  }

  /* Variation: Navy */

  .wp-block-button.is-style-btn-navy .wp-block-button__link{

    background-color: var(--pk-navy) !important; color: var(--pk-off) !important;

  }

  .wp-block-button.is-style-btn-navy .wp-block-button__link:hover{

    background-color: #264a59 !important; color: var(--pk-off) !important;

  }

  /* Variation: Teal */

  .wp-block-button.is-style-btn-teal .wp-block-button__link{

    background-color: var(--pk-teal-block) !important; color: var(--pk-off) !important;

  }

  .wp-block-button.is-style-btn-teal .wp-block-button__link:hover{

    background-color: #327079 !important; color: var(--pk-off) !important;

  }

  /* Variation: Pale (secondary on navy) */

  .wp-block-button.is-style-btn-pale .wp-block-button__link{

    background-color: var(--pk-pale) !important; color: var(--pk-navy) !important;

  }

  .wp-block-button.is-style-btn-pale .wp-block-button__link:hover{

    background-color: var(--pk-off) !important; color: var(--pk-navy) !important;

  }

  /* Variation: Ghost on dark */

  .wp-block-button.is-style-btn-ghost-dark .wp-block-button__link{

    background-color: transparent !important; color: var(--pk-off) !important;

    border: 1.5px solid var(--pk-line-d) !important;

  }

  .wp-block-button.is-style-btn-ghost-dark .wp-block-button__link:hover{

    background-color: transparent !important; color: var(--pk-off) !important;

    border-color: var(--pk-off) !important;

  }

  /* Variation: Ghost on light */

  .wp-block-button.is-style-btn-ghost-light .wp-block-button__link{

    background-color: transparent !important; color: var(--pk-ink) !important;

    border: 1.5px solid var(--pk-line-l) !important;

  }



  .wp-block-button.is-style-btn-ghost-light .wp-block-button__link:hover{

    background-color: var(--pk-ink) !important; color: var(--pk-off) !important;

    border-color: var(--pk-ink) !important;

  }



  /* Section-driven default buttons: a plain button inside a section inherits the

    right colour automatically (matches the variation files). Front-end net. */

  .is-style-section-navy .wp-block-button:not([class*="is-style-btn-"]) .wp-block-button__link,

  .is-style-section-teal .wp-block-button:not([class*="is-style-btn-"]) .wp-block-button__link{

    background-color: var(--pk-yellow) !important; color: var(--pk-navy) !important;

  }

  .is-style-section-navy .wp-block-button:not([class*="is-style-btn-"]) .wp-block-button__link:hover,

  .is-style-section-teal .wp-block-button:not([class*="is-style-btn-"]) .wp-block-button__link:hover{

    background-color: #ece6a0 !important;

  }

  .is-style-section-yellow .wp-block-button:not([class*="is-style-btn-"]) .wp-block-button__link{

    background-color: var(--pk-navy) !important; color: var(--pk-off) !important;

  }

  .is-style-section-yellow .wp-block-button:not([class*="is-style-btn-"]) .wp-block-button__link:hover{

    background-color: #264a59 !important;

  }



  /* ==========================================================================

    9 · HERO / SPLIT layout helpers (optional convenience)

    ========================================================================== */

  .pk-hero-grid{ align-items:center; }

  @media (max-width:781px){

    .pk-hero-grid .pk-frame img{ width:min(60%,240px); }

  }



  /* ==========================================================================

    10 · STOREFRONT HEADER SKIN

    Skins Storefront's real header (#masthead) to match the Pappakoden design.

    Works with the WordPress Menus system: assign a menu to the "Primary" AND

    "Handheld" locations under Appearance > Menus. To turn one menu item into

    the yellow CTA pill, add the CSS class "pk-nav-cta" to that item in the

    menu editor (Screen Options > CSS Classes if the field is hidden).

    ========================================================================== */



  /* --- Masthead bar: navy, sticky, slim --- */

  #masthead.site-header{

    background: var(--pk-navy) !important;

    border-bottom: 1px solid var(--pk-line-d);

    padding: 0 var(--wp--preset--spacing--40);

    position: sticky; top: 0; z-index: 100;

    /* ME */
    /* display: flex;  */

  }

  .site-header .col-full,

  #masthead .col-full{

    max-width: 1180px; 
    margin: 0 auto;

    display: flex; align-items: center; justify-content: space-between;

    gap: 18px; min-height: 64px; padding-left:0; padding-right:0;

  }

  #masthead .col-full {
    margin: unset;
  }


  /* --- Brand: text wordmark --- */

  .site-header .site-branding{ margin: 0; }

  .site-header .site-title,

  .site-header .beta.site-title{

    margin: 0; font-family: var(--wp--preset--font-family--body);

    font-size: 1rem; font-weight: 700; letter-spacing: .08em;

    text-transform: uppercase; line-height: 1;

  }

  .site-header .site-title a,

  .site-header .beta.site-title a{

    color: var(--pk-off) !important; text-decoration: none;

  }

  .site-header .site-description{ display:none; }

  /* If a logo image is used later, it sits in .custom-logo-link */

  .site-header .custom-logo-link img{ max-height: 34px; width:auto; }


  .site-footer a:not(.button):not(.components-button) {
      color: rgba(255,255,255,0.55);
  }

  ul#menu-pappakoden2-2 li::before{
    content: none !important;
  }

  ul#menu-pappakoden2-2 li{
    padding-left: 0 !important;
  }

  span.widget-title {
      color: rgba(255,255,255,0.55) !important;
  }

  /* --- Desktop primary navigation --- */

  #masthead .main-navigation{ margin:0; }

  .main-navigation ul.menu,

  .main-navigation ul.nav-menu{

    display:flex; align-items:center; gap: 30px;

    background: transparent !important; margin:0; padding:0;

  }

  .main-navigation ul.menu li,

  .main-navigation ul.nav-menu li{ margin:0; border:0; }

  .main-navigation ul li a{

    font-family: var(--wp--preset--font-family--body);

    font-size: .90625rem; font-weight: 500;

    color: var(--wp--custom--color--muted-on-dark) !important;

    padding: 6px 0 !important; position: relative;

    text-transform: none; transition: color .18s;

  }

  .main-navigation ul li a:hover,

  .main-navigation ul li.current-menu-item > a{

    color: var(--pk-off) !important;

  }

  /* Red active underline */

  .main-navigation ul li.current-menu-item > a::after{

    content:""; position:absolute; left:0; right:0; bottom:-2px;

    height:2px; background: var(--pk-red); border-radius:2px;

  }



  /* --- Submenus (if any), styled as a light dropdown --- */

  .main-navigation ul.menu ul.sub-menu,

  .main-navigation ul.nav-menu ul.children{

    background: var(--pk-white) !important; border-radius: 8px;

    box-shadow: 0 16px 40px -16px rgba(21,43,52,.4); padding: 6px 0;

    border: 1px solid var(--pk-line-l);

  }

  .main-navigation ul.sub-menu li a{ color: var(--pk-ink) !important; padding: 8px 16px !important; }

  .main-navigation ul.sub-menu li a:hover{ background: var(--pk-pale); }



  /* --- The "Kjøp boken" CTA pill (add class pk-nav-cta to that menu item) --- */

  .main-navigation ul li.pk-nav-cta a{

    background: var(--pk-yellow); color: var(--pk-navy) !important;

    padding: 9px 20px !important; border-radius: 22px;

    font-weight: 600; transition: background .2s;

  }

  .main-navigation ul li.pk-nav-cta a:hover{ background:#ece6a0; color:var(--pk-navy) !important; }

  .main-navigation ul li.pk-nav-cta a::after{ display:none !important; }



  /* --- Mobile: Storefront's menu-toggle + handheld nav --- */

  .site-header .menu-toggle,

  button.menu-toggle{

    background: transparent !important; color: var(--pk-off) !important;

    border: 0; font-family: var(--wp--preset--font-family--body);

    font-weight: 600; padding: 8px 12px;

  }

  .site-header .menu-toggle::before{ color: var(--pk-off); }

  .handheld-navigation{ background: var(--pk-navy); }

  .handheld-navigation ul.menu li a,

  .handheld-navigation ul.nav-menu li a{

    color: var(--pk-off) !important; border-color: var(--pk-line-d) !important;

    font-family: var(--wp--preset--font-family--heading);

    font-size: 1.1rem;

  }

  .handheld-navigation ul li.pk-nav-cta a{

    background: var(--pk-yellow); color: var(--pk-navy) !important;

    border-radius: 22px; margin: 12px; text-align: center;

  }



  /* --- Hide the product search + cart in the header FOR NOW.

        When you add WooCommerce later, delete these two rules to reveal them. --- */

  .site-header .site-search,

  .storefront-handheld-footer-bar .search{ display:none; }

  .site-header-cart{ display:none; }