/*!
Theme Name:         scg_shop
Theme URI:          https://shop.scgroup.dk
Author:             Checkmate Digitalt Bureau
Author URI:         https://checkmate.dk
Version:            1.0.0
Tested up to:       6.7              
Requires at least:  6.5
Requires PHP:       8.0
License:            GNU General Public License v2 or later
License URI:        http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:        scg-shop
Tags:               custom-background, custom-logo, custom-menu, e-commerce, featured-images, threaded-comments, translation-ready, woocommerce

WooCommerce support er deklareret i functions.php med add_theme_support('woocommerce');
*/

/*--------------------------------------------------------------
# TABLE OF CONTENTS
--------------------------------------------------------------
# Normalize & Box Model
# Typography & Base Elements
# Links & Forms
# Layout & Containers
# WordPress Core / Accessibility
# WooCommerce General
# WooCommerce – Products / Shop
# WooCommerce – Cart & Checkout
# WooCommerce – Buttons & Notices
# Custom Components & Utilities
# Responsive & Media Queries
# Dark Mode & Prefers
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize & Box Model
--------------------------------------------------------------*/
@import "normalize.css";   Eller behold inline normalize som Underscores 

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

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

/*--------------------------------------------------------------
# Typography & Base Elements
--------------------------------------------------------------*/
:root {
    --color-brand:        #111111;
    --color-primary:      #111111;
    --color-primary-hover:#262626;
    --color-white:        #f9f9f9;
    --color-light-gray:   #f9f9f9;
    --color-black:        #000000;
}

body {
    color: #1a1a1a;
    background: #f9f9f9;
    font-family: "Host Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
}

h1, .h1 { font-size: 3.5rem; line-height: 1.05; margin-bottom: 1.25rem; font-family: "freight-big-pro", Georgia, serif; font-weight: 300; }
h2, .h2 { font-size: 2.8rem; line-height: 1.1;  margin-bottom: 1.25rem; font-family: "freight-big-pro", Georgia, serif; font-weight: 300; }
h3, .h3 { font-size: 2.25rem; line-height: 1.2; margin-bottom: 1rem;    font-family: "freight-big-pro", Georgia, serif; font-weight: 300; }

@media (min-width: 960px) {
    h1, .h1 { font-size: 5rem; }
    h2, .h2 { font-size: 3.8125rem; }
    h3, .h3 { font-size: 2.9375rem; }
}

p, li, address { margin-bottom: 1.25rem; }

a { color: var(--color-brand); text-decoration: none; }
a:hover,
a:focus { color: #333; text-decoration: underline; }

/*--------------------------------------------------------------
# Links & Forms
--------------------------------------------------------------*/
button,
input[type="submit"],
input[type="button"] {
    cursor: pointer;
    border: none;
    border-radius: 0.5rem;
    background: var(--color-brand);
    color: white;
    font-weight: 700;
    padding: 1rem 2.5rem;
    transition: background 0.2s ease;
}

button:hover,
input[type="submit"]:hover {
    background: var(--color-primary-hover);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    background: white;
    color: #111;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(17,17,17,0.15);
}

/*--------------------------------------------------------------
# Layout & Containers
--------------------------------------------------------------*/
.container,
.car-container,
.cm-contained {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1040px) {
    .container, .car-container, .cm-contained {
        max-width: 1040px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1200px) {
    .container, .car-container, .cm-contained { max-width: 1200px; }
}

@media (min-width: 1480px) {
    .container, .car-container, .cm-contained { max-width: 1480px; }
}

/* Grid utilities – brug disse klasser på WooCommerce shop / archive sider */
.grid-container {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px)  { .grid-container { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px)  { .grid-container { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }
@media (min-width: 1280px) { .grid-container { grid-template-columns: repeat(5, 1fr); } }

/*--------------------------------------------------------------
# WooCommerce General
--------------------------------------------------------------*/
.woocommerce,
.woocommerce-page {
    --wc-primary: var(--color-brand);
    --wc-primary-hover: var(--color-primary-hover);
}

/* Fjern unødvendige WooCommerce margins */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    margin: 0 0 1.5rem;
}

/* Produktkort – typisk styling */
.woocommerce ul.products li.product {
    background: white;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.125rem;
    margin: 0.75rem 1rem 0.25rem;
    line-height: 1.4;
}

.woocommerce ul.products li.product .price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-brand);
    margin: 0 1rem 1rem;
}

/* Knapper – Add to cart, etc. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: var(--color-brand);
    color: white;
    border-radius: 0.5rem;
    padding: 0.9rem 1.8rem;
    font-weight: 600;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: #222;
}

/* Notices / Messages */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin: 0 0 2rem;
}

/*--------------------------------------------------------------
# Custom Components & Utilities (dine tidligere regler – udvalgte)
--------------------------------------------------------------*/
.hover\:bg-brand:hover,
.group:hover .group-hover\:bg-brand {
    background-color: var(--color-brand);
}

.hover\:bg-white:hover,
.child\:bg-white > * {
    background-color: var(--color-white);
}

.hover\:text-black:hover { color: var(--color-black); }
.hover\:text-white:hover { color: white; }

.group:hover .group-hover\:opacity-100 { opacity: 1; }

.focus\:outline-none:focus,
.focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.disabled\:opacity-50:disabled {
    opacity: 0.5;
}

/* Child utilities – ofte brugt i menuer, produktkort osv. */
.child\:font-bold > *   { font-weight: 700; }
.child\:px-6 > *        { padding-left: 1.5rem; padding-right: 1.5rem; }
.child\:w-full > *      { width: 100%; }

/*--------------------------------------------------------------
# Responsive & Media Queries
--------------------------------------------------------------*/
@media (min-width: 640px) {
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .sm\:gap-4       { gap: 1rem; }
    .sm\:p-8         { padding: 2rem; }
    .sm\:text-4xl    { font-size: 3.8125rem; line-height: 1; }
}

@media (min-width: 960px) {
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .md\:p-16        { padding: 4rem; }
    .md\:text-5xl    { font-size: 5rem; line-height: 1; }
}

@media (min-width: 1280px) {
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
    .lg\:gap-10      { gap: 2.5rem; }
    .lg\:text-6xl    { font-size: 8.125rem; line-height: 1; }
}

/* Dark mode – valgfri */
@media (prefers-color-scheme: dark) {
    body {
        background: #111;
        color: #f9f9f9;
    }
    .dark\:text-white { color: #f9f9f9; }
}

/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
@font-face {
    font-family: "Basier Circle";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/BasierCircle-Regular.igZk1xlr.woff2") format("woff2"),
         url("./fonts/BasierCircle-Regular.BJxRALR0.woff") format("woff");
}

@font-face {
    font-family: "Basier Circle";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("./fonts/BasierCircle-SemiBold.DceRZrUH.woff2") format("woff2");
}