/*
Theme Name:  Omtänksamma Kristinehamn
Theme URI:   https://omtanksammakristinehamn.se
Author:      Omtänksamma Kristinehamn
Author URI:  https://omtanksammakristinehamn.se
Description: Ett stilrent, modernt och professionellt tema för Omtänksamma Kristinehamn – en ideell centrumförening. Designat med generöst whitespace, tydlig typografi och mjuka blå toner som andas hav, vatten och frisk luft.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: omtanksamma
Tags:        custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =====================================================
   ÅTERSTÄLLNING & GRUNDLÄGGANDE STILAR
   ===================================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-text);
    background-color: #03334c;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =====================================================
   TYPOGRAFI
   ===================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    color: var(--color-navy);
    margin-bottom: 0.75em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1.25rem;
    max-width: 68ch;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-dark-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--transition-hover);
}

a:hover,
a:focus {
    color: var(--color-primary);
    text-decoration: none;
}

strong, b { font-weight: var(--fw-semibold); }
em, i     { font-style: italic; }

ul, ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

li { margin-bottom: 0.35rem; }

blockquote {
    border-left: 4px solid var(--color-primary);
    padding: 1rem 1.5rem;
    margin: 1.75rem 0;
    background: var(--color-off-white);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-navy);
    font-style: italic;
}

code, pre {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.875em;
    background: var(--color-off-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

code { padding: 0.2em 0.45em; }

pre {
    padding: 1.25rem;
    overflow-x: auto;
    margin-bottom: 1.25rem;
}

pre code {
    background: none;
    border: none;
    padding: 0;
}

hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 2.5rem 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.75rem;
    font-size: var(--fs-small);
}

th {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    padding: 0.875rem 1rem;
    text-align: left;
    letter-spacing: 0.03em;
}

td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

tr:nth-child(even) td {
    background-color: var(--color-off-white);
}

tr:hover td {
    background-color: rgba(161, 218, 247, 0.2);
}

/* =====================================================
   EYEBROW-TEXT
   ===================================================== */

.eyebrow {
    display: block;
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.6rem;
}

/* =====================================================
   LAYOUT – CONTAINER
   ===================================================== */

.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    width: 100%;
}

.container--narrow {
    max-width: 860px;
}

.container--wide {
    max-width: 1440px;
}

/* =====================================================
   KNAPPAR
   ===================================================== */

.btn,
button.btn,
input[type="submit"].btn,
a.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-small);
    letter-spacing: var(--ls-button);
    text-decoration: none;
    border-radius: var(--btn-radius);
    padding: var(--btn-pad);
    cursor: pointer;
    transition: var(--transition-hover);
    border: 1.5px solid transparent;
    line-height: 1.4;
    white-space: nowrap;
}

/* Primär knapp */
.btn--primary,
button.btn--primary,
input[type="submit"] {
    background-color: var(--color-light-blue);
    color: var(--color-navy);
    border-color: var(--color-light-blue);
}

.btn--primary:hover,
.btn--primary:focus,
button.btn--primary:hover,
input[type="submit"]:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 4px 14px rgba(4, 168, 252, 0.35);
}

/* Sekundär knapp */
.btn--secondary {
    background-color: transparent;
    color: var(--color-dark-blue);
    border-color: var(--color-dark-blue);
}

.btn--secondary:hover,
.btn--secondary:focus {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}

/* Vit knapp (för hero) */
.btn--white {
    background-color: var(--color-white);
    color: var(--color-navy);
    border-color: var(--color-white);
}

.btn--white:hover,
.btn--white:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Outline ljus (för mörk bakgrund) */
.btn--outline-light {
    background-color: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.6);
}

.btn--outline-light:hover,
.btn--outline-light:focus {
    background-color: var(--color-white);
    color: var(--color-navy);
    border-color: var(--color-white);
}

/* Stor knapp */
.btn--lg {
    padding: 0.9rem 2.25rem;
    font-size: var(--fs-body);
}

/* Liten knapp */
.btn--sm {
    padding: var(--btn-pad-sm);
    font-size: 0.8125rem;
}

/* =====================================================
   SEKTIONER
   ===================================================== */

.section {
    padding-block: var(--section-pad-y);
}

.section--white   { background-color: var(--color-white); }
.section--off-white { background-color: var(--color-off-white); }
.section--navy    { background-color: var(--color-navy); }
.section--primary { background-color: var(--color-primary); }

.section__header {
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section__header--center {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    color: var(--color-navy);
    margin-bottom: 0.5rem;
}

.section__lead {
    font-size: 1.0625rem;
    color: var(--color-text);
    max-width: 58ch;
}

/* =====================================================
   GRID-LAYOUTS
   ===================================================== */

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-cards);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-cards);
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--gap-cards);
}

/* =====================================================
   VÅGAVDELARE
   ===================================================== */

.wave-divider {
    display: block;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.wave-divider svg {
    display: block;
    width: 100%;
}

/* =====================================================
   FORMULÄR
   ===================================================== */

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-weight: var(--fw-medium);
    font-size: var(--fs-small);
    margin-bottom: 0.4rem;
    color: var(--color-navy);
    letter-spacing: 0.02em;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
    appearance: none;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(4, 168, 252, 0.15);
}

.form-control::placeholder {
    color: rgba(26, 43, 53, 0.4);
}

textarea.form-control {
    resize: vertical;
    min-height: 140px;
}

/* Honey-pot fält – döljs från användare */
.form-honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

/* Statusmeddelanden */
.form-notice {
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: var(--fs-small);
    margin-bottom: 1.25rem;
}

.form-notice--success {
    background: rgba(4, 168, 252, 0.1);
    border: 1px solid var(--color-primary);
    color: var(--color-dark-blue);
}

.form-notice--error {
    background: rgba(2, 51, 76, 0.08);
    border: 1px solid var(--color-dark-blue);
    color: var(--color-navy);
}

/* =====================================================
   HJÄLPKLASSER
   ===================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-navy    { color: var(--color-navy); }
.text-white   { color: var(--color-white); }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1       { gap: 1rem; }

/* =====================================================
   INLÄGG – GENERELLA STILAR
   ===================================================== */

.entry-header {
    margin-bottom: 2rem;
}

.entry-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    color: var(--color-navy);
}

.entry-meta {
    font-size: var(--fs-small);
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-weight: var(--fw-medium);
}

.entry-content {
    max-width: 72ch;
}

.entry-content > * + * {
    margin-top: 1.25rem;
}

/* =====================================================
   PAGINERING
   ===================================================== */

.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 2.5rem;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--color-dark-blue);
    text-decoration: none;
    transition: var(--transition-hover);
}

.pagination a:hover,
.pagination .current {
    background-color: var(--color-dark-blue);
    border-color: var(--color-dark-blue);
    color: var(--color-white);
}

/* =====================================================
   ACCESSIBILITY
   ===================================================== */

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    background: var(--color-dark-blue);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    font-size: var(--fs-small);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    text-decoration: none;
    font-weight: var(--fw-medium);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* =====================================================
   WORDPRESS CORE KLASSER
   ===================================================== */

.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; margin-bottom: 1rem; }
.alignfull  { width: 100vw; margin-left: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text {
    font-size: var(--fs-small);
    color: var(--color-primary);
    margin-top: 0.4rem;
    text-align: center;
}

/* .sticky – WordPress sticky post, stilas via kort-komponenter */

.wp-block-image img { border-radius: var(--radius-md); }

/* Gallerier */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.gallery-item { overflow: hidden; border-radius: var(--radius-sm); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================
   SIDLAYOUT
   ===================================================== */

#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

#content {
    flex: 1;
}

.site-main {
    margin: 0;
    padding: 0;
}

/* Startsida: hero är fixed längst bak, content + footer scrollar ovanpå */
.home #content {
    position: relative;
    z-index: 10;
    margin-top: 100vh;
    background: var(--color-off-white, #F4F9FD);
}

/* Mobil: ingen fixed hero – .hero__mobile-section hanterar höjden i normal flow */
@media (max-width: 768px) {
    .home #content {
        margin-top: 0;
        z-index: 2;
    }

    .home-activities-section {
        position: relative;
        background: var(--color-off-white, #F4F9FD);
    }
}

/* Om oss: standard-layout (ingen fixed-hero scroll) */
.page-template-template-om-oss #content {
    position: relative;
    z-index: 10;
    margin-top: 0;
    padding-top: 0;
    background: transparent;
}

.page-template-template-om-oss .om-oss-main {
    background: transparent;
}

/* Upplev: ingen fixed hero, padding-top nollställs */
.page-template-template-upplev #content {
    position: relative;
    z-index: 10;
    margin-top: 0;
    padding-top: 0;
    background: transparent;
}

.page-template-template-upplev .site-main {
    background: transparent;
}

/* Ger utrymme under sticky header */
/* .has-hero #content – hero-sidor börjar direkt under header via margin-top på hero-sektionen */

/* Standardsidor med padding-top */
.page-with-hero-image {
    padding-top: 0;
}