/*
Theme Name: Arkitektpanduro
Theme URI: https://ap.qvik.dk
Description: Fresh Gutenberg block theme for ap.qvik.dk — visual tokens mirrored from arkitektpanduro.qvik.dk (Elementor).
Author: WP-Studio
Version: 0.5.19
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: arkitektpanduro
*/

/* =========================================================================
   PHASE 1 — Site analysis findings (arkitektpanduro.qvik.dk)
   Re-verified: 2026-07-18 (full re-run; live Elementor kit + page CSS).
   Source snapshots: theme/references/source-*.css

   Sources:
     Kit #1899             → post-1899.css   (globals: colors, type, 750px)
     Homepage #2274        → post-2274.css   (785px shell, 6-col portfolio)
     Home header #3955     → post-3955.css   (logo-only, 785px)
     Interior header #3833 → post-3833.css   (contact + nav)
     Projekter #2217       → post-2217.css   (3-col grid)
     Single project #5730  → post-5730.css   (24% / 76% layout, verified)
     Content pages e.g. OM #3754 → same 24%/76% + 50px text pad
   =========================================================================

   1. CONTAINER / LAYOUT
   -------------------------------------------------------------------------
   Boxed content width (kit):     750px
     .elementor-section-boxed > .elementor-container { max-width: 750px }
     .e-con { --container-max-width: 750px }
   Homepage outer section:        785px  (#b4f5734)
   Homepage icon-nav row:         518px  (#16ba476)
   Custom page lock (kit CSS):    page { min-width/width: 750px; margin: auto }
   Body / header side padding:    5% left / 5% right
   Header min-height:             70px
   Header bottom margin:          60px   (interior header #3833)
   Header columns (desktop):      contact 34% | nav 66%
   Widget spacing (kit):          20px
   Homepage top spacer:           108px

   Homepage portfolio (#9e2b3c4):
     columns: 6 (tablet 6 / mobile 3)
     gap:     10px column + row
     ratio:   0.66 (padding-bottom: calc(0.66 * 100%))
     overlay: transparent kit color 8630d9f (#7E222200)

   Projekter grid (#c5989df):
     columns: 3 (tablet 2 / mobile 3)
     gap:     75px column + row
     ratio:   0.6
     overlay: #FDFDFD
     title:   Arial 15px (custom CSS override on section #897f5c2)

   Single project (two-column, verified on #5730):
     container:           750px
     left (gallery):      24% — vertical gallery, hover overlay rgba(0,0,0,0.5)
     right (title+text):  76% — padding-left 50px
     title typography:    Arial 15px bold, color #6D6E71 (kit e69253c)
     Same split on OM #3754 (gallery/media 24% | text 76%)

   2. COLOR PALETTE (Elementor kit #1899 globals)
   -------------------------------------------------------------------------
   Primary / secondary / accent:  #000000
   Text (body + default links):  #6D6E71  (--e-global-color-text / 154d4a3)
   Theme / near-white:            #FFFEFE  (f898f31)
   Soft gray:                     #E9E9E9  (0d046a4)
   Soft background:               #F9F9F9  (c6c574f)
   White:                         #FFFFFF  (b500f0a)
   White 90%:                     #FFFFFFE6 (7ad78f4)
   Overlay (transparent):         #7E222200 (8630d9f) — homepage portfolio
   Header border:                 #E7E7E7
   Active nav:                    #000000
   Dropdown active:               #9E9E9E
   Page transition:               #FFBC7D

   Homepage icon-nav accent dots:
     Projekter:                   #19BFE0
     Om tegnestuen:               #BAD875
     Nyheder:                     #FF70B3
     Ydelser:                     #000000
     Referencer:                  #909090

   3. TYPOGRAPHY
   -------------------------------------------------------------------------
   Body / text (kit "text" + custom eda7256):
     family: Arial, Sans-serif
     size:   11px
     line:   1.4em
     weight: 300 (eda7256)

   Primary headings (kit "primary"):
     family: Montserrat
     size:   35px (tablet 32px / mobile 30px)
     weight: 200
     transform: uppercase
     line:   1em

   Secondary:
     Montserrat 18px / 400 / uppercase

   Accent:
     Montserrat 16px / 300 / uppercase / line 1.2em

   Project title (e69253c):
     Arial 15px / bold / transform none / color text (#6D6E71)

   Nav menu items (header #3833):
     Arial 11px / weight 300 / transform none (eda7256)
     color: #6D6E71 → hover/active #000000
     item padding: 6px L/R; horizontal gap ~5px

   Other kit faces (used sparingly):
     Montserrat (100–900), Alef, Parisienne, Varela Round

   4. HEADER STRUCTURE
   -------------------------------------------------------------------------
   Homepage (#3955): logo-only template, max-width 785px
     Logo: /wp-content/uploads/2021/06/logo.jpg (550×31)

   Interior (#3833): two-column row inside 750px container
     left  (34%): contact  "T: 21 27 67 61 · email"
                  Arial 11px / line 1.4 / padding-top 14px
     right (66%): horizontal nav, align end
     Menu: Forsiden | Projekter | Om tegnestuen | Nyheder |
           Ydelser | Referencer | Regler og vilkår
     Background: #FFFFFF
     Margin: 0 top / 60px bottom; padding 0 5%

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

:root {
	/* Layout — see findings above */
	--ap-content-width: 750px;
	--ap-wide-width: 785px;
	--ap-icon-nav-width: 518px;
	--ap-body-pad-x: 5%;
	--ap-header-min-height: 70px;
	--ap-header-margin-bottom: 60px;
	--ap-header-contact-width: 34%;
	--ap-header-nav-width: 66%;
	--ap-widget-gap: 20px;
	--ap-home-spacer: 108px;

	/* Project grids */
	--ap-home-grid-cols: 6;
	--ap-home-grid-gap: 10px;
	--ap-home-grid-ratio: 0.66;
	--ap-projekter-grid-cols: 3;
	--ap-projekter-grid-gap: 75px;
	--ap-projekter-grid-ratio: 0.6;

	/* Single project two-column */
	--ap-project-gallery-width: 24%;
	--ap-project-text-width: 76%;
	--ap-project-text-pad-left: 50px;
	--ap-project-gallery-gap: 22px;

	/* Colors — kit #1899 */
	--ap-color-primary: #000000;
	--ap-color-secondary: #000000;
	--ap-color-text: #6d6e71;
	--ap-color-accent: #000000;
	--ap-color-theme: #fffefe;
	--ap-color-soft-gray: #e9e9e9;
	--ap-color-soft-bg: #f9f9f9;
	--ap-color-white: #ffffff;
	--ap-color-white-90: #ffffffe6;
	--ap-color-overlay: #7e222200;
	--ap-color-header-border: #e7e7e7;
	--ap-color-nav-active: #000000;
	--ap-color-nav-dropdown-active: #9e9e9e;
	--ap-color-page-transition: #ffbc7d;
	--ap-color-projekter-overlay: #fdfdfd;

	/* Accent dots (homepage icon nav) */
	--ap-dot-projekter: #19bfe0;
	--ap-dot-om: #bad875;
	--ap-dot-nyheder: #ff70b3;
	--ap-dot-ydelser: #000000;
	--ap-dot-referencer: #909090;

	/* Typography */
	--ap-font-body: Arial, Helvetica, sans-serif;
	--ap-font-heading: "Montserrat", sans-serif;
	--ap-font-size-body: 11px;
	--ap-font-size-nav: 11px;
	--ap-font-size-project-title: 15px;
	--ap-font-size-heading: 35px;
	--ap-font-weight-body: 300;
	--ap-line-height-body: 1.4;
}

/* -------------------------------------------------------------------------
   Base — mirrors kit body / page lock
------------------------------------------------------------------------- */
html {
	box-sizing: border-box;
}

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

body {
	/* Kit custom CSS locks page to 750px; we keep min-width + centered flow */
	min-width: var(--ap-content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ap-body-pad-x);
	padding-right: var(--ap-body-pad-x);
	background: var(--ap-color-white);
	color: var(--ap-color-text);
	font-family: var(--ap-font-body);
	font-size: var(--ap-font-size-body);
	font-weight: var(--ap-font-weight-body);
	line-height: var(--ap-line-height-body);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: var(--ap-color-text);
	text-decoration: none;
}

a:hover {
	color: var(--ap-color-primary);
}

h1,
h2,
h3,
h4 {
	font-family: var(--ap-font-heading);
	font-weight: 200;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--ap-color-primary);
}

h1 {
	font-size: var(--ap-font-size-heading);
	line-height: 1em;
}

/* -------------------------------------------------------------------------
   Layout helpers (Gutenberg align / constrained content)
------------------------------------------------------------------------- */
.ap-container {
	max-width: var(--ap-content-width);
	margin-left: auto;
	margin-right: auto;
}

.ap-container--wide {
	max-width: var(--ap-wide-width);
}