/*
Theme Name: Kongshavnar Craft Dark
Theme URI: https://polstring.fo
Author: Oddmar Dam
Author URI: https://polstring.fo
Description: The dark-mode counterpart to Kongshavnar Craft — same warm, craft-focused layout for Kongshavnar Polstring (upholstery for boats and furniture, from the heart of Skálafjørður), rebuilt with a deep charcoal palette and amber accents. Activate this instead of "Kongshavnar Craft" to switch the whole site to dark mode.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kongshavnar-craft-dark
*/

/* -----------------------------------------------------------
   0. Design tokens (dark palette)
----------------------------------------------------------- */
:root{
  --kc-bg:         #17130F;
  --kc-bg-2:       #221B15;
  --kc-bg-3:       #0F0C09;
  --kc-border:     #3C2F22;
  --kc-text:       #F0E4D0;
  --kc-text-body:  #DED0B9;
  --kc-text-muted: #A9895F;
  --kc-ink:        #18120D;
  --kc-rust:       #E2793D;
  --kc-rust-hover: #F6A868;
  --kc-amber:      #EFA83A;
  --kc-amber-soft: #F8C36B;

  --kc-font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --kc-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --kc-radius: 3px;
  --kc-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --kc-max: 1140px;
}

/* -----------------------------------------------------------
   1. Reset-ish base
----------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--kc-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--kc-text-body);
  background-color: var(--kc-bg);
  background-image:
    radial-gradient(rgba(239, 168, 58, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(0, 0, 0, 0.25) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1.5px 1.5px;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--kc-rust); text-decoration: none; }
a:hover{ color: var(--kc-rust-hover); }

h1, h2, h3, h4, h5, h6{
  font-family: var(--kc-font-head);
  color: var(--kc-text);
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.1rem, 4vw, 3.2rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3{ font-size: 1.4rem; }

p{ margin: 0 0 1.2em; }

.kc-container{
  max-width: var(--kc-max);
  margin: 0 auto;
  padding: 0 28px;
}

/* -----------------------------------------------------------
   2. Site header
----------------------------------------------------------- */
.kc-header{
  background: var(--kc-bg-2);
  border-bottom: 3px solid var(--kc-amber);
  position: relative;
}
.kc-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 28px;
  max-width: var(--kc-max);
  margin: 0 auto;
  flex-wrap: wrap;
}
.kc-brand{
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.kc-brand img{
  max-height: 56px;
  width: auto;
}
.kc-brand-name{
  font-family: var(--kc-font-head);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--kc-text);
  letter-spacing: 0.02em;
}
.kc-brand:hover .kc-brand-name{ color: var(--kc-amber); }

.kc-nav ul{
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.kc-nav a{
  display: inline-block;
  padding: 10px 16px;
  color: var(--kc-text);
  font-weight: 500;
  border-radius: var(--kc-radius);
  transition: background 0.15s ease, color 0.15s ease;
}
.kc-nav a:hover,
.kc-nav .current-menu-item > a{
  background: var(--kc-amber);
  color: var(--kc-ink);
}

.kc-menu-toggle{
  display: none;
  background: none;
  border: 2px solid var(--kc-text);
  border-radius: var(--kc-radius);
  padding: 8px 12px;
  font-family: var(--kc-font-body);
  font-weight: 600;
  color: var(--kc-text);
  cursor: pointer;
}

@media (max-width: 720px){
  .kc-menu-toggle{ display: inline-block; }
  .kc-nav{
    display: none;
    width: 100%;
    order: 3;
  }
  .kc-nav.is-open{ display: block; }
  .kc-nav ul{ flex-direction: column; gap: 2px; }
}

/* -----------------------------------------------------------
   3. Page header / entry content
----------------------------------------------------------- */
.kc-page-hero{
  position: relative;
  background:
    linear-gradient(180deg, rgba(15,12,9,0.75) 0%, rgba(15,12,9,0.6) 55%, rgba(23,19,15,0.97) 100%),
    url('assets/photos/hero-harbor.jpg');
  background-size: cover;
  background-position: center 40%;
  padding: 72px 28px 48px;
  text-align: center;
  border-bottom: 1px solid var(--kc-border);
}
.kc-page-hero h1{ margin-bottom: 0.2em; color: var(--kc-text); }
.kc-page-hero .kc-eyebrow{
  display: inline-block;
  font-family: var(--kc-font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--kc-amber);
  margin-bottom: 0.8em;
}

.kc-content{
  max-width: var(--kc-max);
  margin: 0 auto;
  padding: 48px 28px 72px;
}

.kc-entry{
  background: var(--kc-bg-2);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius);
  padding: clamp(24px, 4vw, 56px);
  box-shadow: var(--kc-shadow);
}

/* -----------------------------------------------------------
   4. Block-content styling (works with existing Gutenberg content)
----------------------------------------------------------- */
.kc-entry .wp-block-button__link,
.kc-entry a.button,
.kc-entry input[type="submit"]{
  display: inline-block;
  background: var(--kc-amber);
  color: var(--kc-ink) !important;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: var(--kc-radius);
  border: 2px solid var(--kc-ink);
  text-decoration: none;
  transition: transform 0.12s ease, background 0.15s ease;
}
.kc-entry .wp-block-button__link:hover,
.kc-entry a.button:hover{
  background: var(--kc-amber-soft);
  color: var(--kc-ink) !important;
  transform: translateY(-1px);
}

.kc-entry blockquote,
.kc-entry .wp-block-quote{
  position: relative;
  margin: 2em 0;
  padding: 1.2em 1.6em 1.2em 2.4em;
  background: var(--kc-bg);
  border-left: 4px solid var(--kc-amber);
  font-family: var(--kc-font-head);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--kc-text);
  border-radius: 0 var(--kc-radius) var(--kc-radius) 0;
}
.kc-entry blockquote::before{
  content: "\201C";
  position: absolute;
  left: 12px;
  top: -4px;
  font-family: var(--kc-font-head);
  font-size: 2.6rem;
  color: var(--kc-amber);
  line-height: 1;
}
.kc-entry blockquote cite,
.kc-entry blockquote footer{
  display: block;
  margin-top: 0.6em;
  font-family: var(--kc-font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--kc-rust);
}

.kc-entry hr{
  border: none;
  border-top: 2px dashed var(--kc-border);
  margin: 2.5em 0;
}

.kc-entry figure{ margin: 1.6em 0; }
.kc-entry figure img{
  border-radius: var(--kc-radius);
  box-shadow: var(--kc-shadow);
}
.kc-entry figcaption{
  text-align: center;
  font-size: 0.85rem;
  color: var(--kc-text-muted);
  margin-top: 0.6em;
}

.kc-entry .wp-block-columns{
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.kc-entry .wp-block-column{ flex: 1 1 240px; }

.kc-entry ul, .kc-entry ol{ padding-left: 1.4em; }
.kc-entry li{ margin-bottom: 0.4em; }

.kc-entry table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
}
.kc-entry th, .kc-entry td{
  padding: 10px 14px;
  border: 1px solid var(--kc-border);
}
.kc-entry th{ background: var(--kc-bg-3); font-family: var(--kc-font-head); color: var(--kc-text); }

/* Our layout is a boxed card, not an edge-to-edge canvas, so "wide" and
   "full" alignments simply fill the card rather than bleeding past the
   viewport (which would cause horizontal overflow / clipped content).
   !important + the .kc-entry ancestor qualifier are needed to beat
   WordPress core's own wp-block-library-theme styles, which enqueue
   after this stylesheet and would otherwise win the cascade. */
.kc-entry .alignwide,
.kc-entry .alignfull,
body .kc-entry .alignwide,
body .kc-entry .alignfull{
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
}
.kc-content, .kc-entry{ overflow-x: hidden; }
.kc-entry iframe, .kc-entry embed, .kc-entry object{ max-width: 100%; }

/* -----------------------------------------------------------
   5. Footer
----------------------------------------------------------- */
.kc-footer{
  background: var(--kc-bg-3);
  color: var(--kc-text-body);
  margin-top: 48px;
  border-top: 1px solid var(--kc-border);
}
.kc-footer-inner{
  max-width: var(--kc-max);
  margin: 0 auto;
  padding: 56px 28px 32px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 780px){
  .kc-footer-inner{ grid-template-columns: 1fr; }
}
.kc-footer h4{
  color: var(--kc-amber);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
}
.kc-footer p, .kc-footer a{ color: var(--kc-text-body); }
.kc-footer a:hover{ color: var(--kc-amber); }
.kc-footer-brand img{ max-height: 46px; margin-bottom: 12px; }
.kc-footer-brand .kc-tagline{
  font-family: var(--kc-font-head);
  font-style: italic;
  color: var(--kc-text-muted);
}

.kc-social{ display: flex; gap: 14px; margin-top: 14px; }
.kc-social a{
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--kc-border);
  border-radius: 50%;
  color: var(--kc-text-body);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kc-social a:hover{ background: var(--kc-amber); border-color: var(--kc-amber); color: var(--kc-ink); }
.kc-social svg{ width: 18px; height: 18px; fill: currentColor; }

.kc-footer-bottom{
  border-top: 1px solid rgba(240, 228, 208, 0.1);
  text-align: center;
  padding: 18px 28px 28px;
  font-size: 0.85rem;
  color: var(--kc-text-muted);
}

/* -----------------------------------------------------------
   6. Misc: search / 404 / comments
----------------------------------------------------------- */
.kc-search-form{ display: flex; gap: 10px; margin: 1em 0 2em; }
.kc-search-form input[type="search"]{
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--kc-border);
  border-radius: var(--kc-radius);
  font-family: var(--kc-font-body);
  background: var(--kc-bg);
  color: var(--kc-text-body);
}
.kc-search-form button{
  background: var(--kc-amber);
  color: var(--kc-ink);
  border: none;
  padding: 10px 20px;
  border-radius: var(--kc-radius);
  font-weight: 600;
  cursor: pointer;
}
.kc-search-form button:hover{ background: var(--kc-amber-soft); }

.kc-post-meta{
  font-size: 0.85rem;
  color: var(--kc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1em;
}

.kc-comments{ margin-top: 2.5em; padding-top: 2em; border-top: 2px dashed var(--kc-border); }