/*
 * Fil: wp-content/plugins/helmia-orter/assets/css/orter.css
 * Syfte: Layout för ort- och tjänstesidor. Använder temats design tokens (ai-redesign 07, 04) för enhetlig look and feel.
 */

/* Fallback om tema inte sätter dessa */
:root {
  --helmia-orter-primary: var(--wp--preset--color--primary, #001C89);
  --helmia-orter-text: var(--wp--preset--color--text, #171717);
  --helmia-orter-muted: var(--wp--preset--color--text-muted, #737373);
  --helmia-orter-bg: var(--wp--preset--color--secondary-bg, #F2F2F2);
  --helmia-orter-border: var(--wp--preset--color--border, #E5E5E5);
}

/* Container och sektioner enligt tema (1280px, spacing 07) */
.helmia-container { max-width: var(--helmia-container-max, 1280px); margin: 0 auto; padding: 0 var(--space-6, 1.5rem); box-sizing: border-box; }
@media (min-width: 768px) { .helmia-container { padding-left: var(--space-8, 2rem); padding-right: var(--space-8, 2rem); } }
.helmia-hero { background: var(--helmia-orter-bg); padding: var(--space-16, 4rem) 0; margin-bottom: 0; width: 100%; overflow-x: hidden; }
@media (min-width: 768px) { .helmia-hero { padding: var(--space-20, 5rem) 0; } }
@media (min-width: 1024px) { .helmia-hero { padding: var(--space-24, 6rem) 0; } }
.helmia-hero__title { color: var(--helmia-orter-primary); margin: 0 0 var(--space-2, 0.5rem); font-weight: 800; line-height: 1.1; }
.helmia-hero__ingress { color: var(--helmia-orter-muted); font-size: 1.125rem; margin: 0; }

.helmia-section { padding: var(--space-12, 3rem) 0; }
@media (min-width: 768px) { .helmia-section { padding: var(--space-20, 5rem) 0; } }
@media (min-width: 1024px) { .helmia-section { padding: var(--space-24, 6rem) 0; } }
.helmia-section--alt { background: var(--wp--preset--color--white, #fff); border-top: 1px solid var(--helmia-orter-border); border-bottom: 1px solid var(--helmia-orter-border); }
.ort-top { display: grid; grid-template-columns: 1fr; gap: var(--space-6, 1.5rem); }
@media (min-width: 960px) { .ort-top { grid-template-columns: 1fr 1fr; align-items: start; } }
.gmap-square iframe { aspect-ratio: 1 / 1; width: 100%; height: auto; border-radius: 10px; }
.ort-content--top { margin-top: 12px; }

.helmia-section__title { color: var(--helmia-orter-text); font-size: 1.625rem; margin: 0 0 var(--space-4, 1rem); }
.ort-columns { display: grid; grid-template-columns: 1fr; gap: var(--space-8, 2rem); }
@media (min-width: 960px) { .ort-columns { grid-template-columns: 3fr 2fr; align-items: start; } }

/* Smalare sidospalt + aside först på mobil (single-ort-family) */
.ort-columns--family .ort-col--side {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}
.ort-columns--family .ort-col--main { order: 2; }
@media (min-width: 960px) {
  /* Huvudkolumn / aside ca 60 % / 40 % (3fr : 2fr) */
  .ort-columns--family {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }
  .ort-columns--family .ort-col--main { order: 1; }
  .ort-columns--family .ort-col--side { order: 2; }
}

.ort-aside-acf { border: 1px solid var(--helmia-orter-border); border-radius: 8px; padding: var(--space-3, 0.75rem); background: var(--wp--preset--color--white, #fff); }
/* Systermodul till .ort-aside-acf (t.ex. kontakt välj avdelning) – ingen gemensam ram */
.ort-aside-outside { min-width: 0; }
.ort-aside-acf__module + .ort-aside-acf__module { margin-top: var(--space-3, 0.75rem); }
.ort-aside-acf__wysiwyg :first-child { margin-top: 0; }
.ort-aside-acf__wysiwyg :last-child { margin-bottom: 0; }
.ort-aside-acf__buttons { list-style: none; margin: 0; padding: 0; }
.ort-aside-acf__buttons-item + .ort-aside-acf__buttons-item { margin-top: var(--space-2, 0.5rem); }
.ort-aside-acf__img { max-width: 100%; height: auto; display: block; border-radius: 6px; }
.ort-aside-acf__figcaption { margin-top: var(--space-2, 0.5rem); font-size: 0.95rem; color: var(--helmia-orter-muted); }
.ort-col--side .side-panel { margin-bottom: 14px; }
.iframe-square { position: relative; width: 100%; }
.iframe-square .gmap-embed iframe { width: 100%; aspect-ratio: 5 / 4; height: auto; border-radius: 10px; }
.quick-links__row { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-links { margin-bottom: 24px; }
.fuel-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.fuel-badge { display: inline-block; padding: 4px 8px; border: 1px solid var(--helmia-orter-border); border-radius: 999px; font-size: 12px; color: #111; background: #fff; }

.helmia-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.card { grid-column: span 12; border: 1px solid var(--helmia-orter-border); border-radius: 10px; overflow: hidden; background: var(--wp--preset--color--white, #fff); display: flex; flex-direction: column; }
.card__media { background: var(--helmia-orter-bg); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.image-placeholder { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #eceff3, #eceff3 10px, #f7f9fc 10px, #f7f9fc 20px); }
.card__body { padding: var(--space-6, 1.5rem); }
.card__title { margin: 0 0 var(--space-2, 0.5rem); font-size: 1.125rem; color: var(--helmia-orter-text); }
.card__text { margin: 0 0 var(--space-3, 0.75rem); color: var(--helmia-orter-muted); }
.btn { display: inline-block; background: var(--helmia-orter-primary); color: var(--wp--preset--color--white, #fff); padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem); border-radius: 6px; text-decoration: none; font-weight: 600; min-height: 44px; box-sizing: border-box; }
.btn:hover { opacity: .92; }

@media (min-width: 640px) {
  .card { grid-column: span 6; }
}
@media (min-width: 960px) {
  .card { grid-column: span 4; }
}

.kontakt-panel { display: grid; grid-template-columns: 1fr; gap: 16px; }
.oppettider pre { background: #fff; border: 1px solid var(--helmia-orter-border); padding: 10px; border-radius: 6px; white-space: pre-wrap; }
.gmap-embed iframe { width: 100%; min-height: 260px; border: 0; border-radius: 8px; }
.gmap-full .gmap-embed iframe { width: 100%; min-height: 280px; }
.gmap-top { padding-top: 0; padding-bottom: 0; }

.back-link a { color: var(--helmia-orter-primary); text-decoration: none; }

.faq { display: grid; gap: 12px; }
.faq__item { border: 1px solid var(--helmia-orter-border); border-radius: 8px; background: #fff; padding: 12px; }
.faq__q { margin: 0; color: var(--helmia-orter-text); font-size: 1.125rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.faq__q::after { content: '+'; color: var(--helmia-orter-muted); font-weight: 700; }
.faq__a { color: var(--helmia-orter-muted); margin-top: 8px; display: none; }
.faq__item.open .faq__a { display: block; }
.faq__item.open .faq__q::after { content: '–'; }
.kontakt-panel { grid-template-columns: 1fr; }
.kontakt-col--right { display: flex; flex-direction: column; gap: 12px; }
.facilities-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; }
.facility { position: relative; display: grid; place-items: center; height: 34px; border: 1px solid var(--helmia-orter-border); border-radius: 6px; background: #fff; cursor: default; color: #111; }
.facility__icon { font-size: 16px; line-height: 1; color: #111; }
.facilities-panel h3 { margin-bottom: 8px; }
.facility::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: 6px 8px; border-radius: 6px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease-in-out; }
.facility::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #111; opacity: 0; transition: opacity .15s ease-in-out; }
.facility:hover::after, .facility:hover::before { opacity: 1; }

@media (max-width: 767px) {
  .facilities-icons { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 479px) {
  .facilities-icons { grid-template-columns: repeat(3, 1fr); }
}

.ort-gallery__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .ort-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
.ort-gallery__item .caption { margin-top: 6px; color: var(--helmia-orter-muted); font-size: .95rem; }
.ort-gallery { margin-top: 20px; }

/* Luft mellan block i vänsterkolumn */
.ort-content > * + * { margin-top: 32px; }

/* Enhetlig typografi och mellanrum i vänsterkolumnen */
.ort-content { color: var(--helmia-orter-text); line-height: 1.7; font-size: 1.1rem; }
.ort-content h2, .ort-content h3 { color: var(--helmia-orter-text); margin: 24px 0 16px; font-size: 1.75rem; font-weight: 600; }
.ort-content p { margin: 0 0 16px; }
.ort-content ul { padding-left: 20px; margin: 0 0 16px; }
.ort-content li { margin: 6px 0; }

/* Extra marginal för vår anläggning */
.ort-gallery { margin-top: 40px; padding-top: 8px; }

.ort-layout { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 960px) { .ort-layout { grid-template-columns: 2fr 1fr; } }
.side-panel, .sub-pages, .facilities-panel { border: 1px solid var(--helmia-orter-border); border-radius: 8px; padding: 12px; background: #fff; }
.kontakt-panel.tight { display: flex; flex-direction: column; gap: 8px; }
.contact-row { display: grid; grid-template-columns: 20px 1fr; align-items: start; column-gap: 8px; }
.contact-row i { color: #111; font-size: 14px; line-height: 1.2; margin-top: 2px; }
.contact-row span { color: var(--helmia-text, #333) !important; }
.contact-row a { color: var(--helmia-text, #333) !important; text-decoration: none; }
.contact-row a:hover { color: var(--helmia-orter-primary) !important; }
.contact-hours .oppettider pre { padding: 8px; }
.drivmedel .fuel-badges { margin-top: 6px; }
.fuel-badge { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 2px 6px; font-size: 11px; color: #495057; }
.sub-pages__list { list-style: none; padding: 0; margin: 0; }
.sub-pages__item { border-bottom: 1px solid var(--helmia-orter-border); }
.sub-pages__item:last-child { border-bottom: none; }
.sub-pages__item a { display: block; padding: 10px 4px; color: var(--helmia-orter-text); text-decoration: none; }
.sub-pages__item a:hover { color: var(--helmia-orter-primary); }
/* Aktuell avdelning i sidopanelen (single-ort-family) */
.sub-pages__item--current span[aria-current="page"] {
  display: block;
  padding: 10px 4px;
  color: var(--helmia-orter-primary);
  font-weight: var(--helmia-font-weight-semibold, 600);
}

/* Breadcrumbs */
.helmia-breadcrumbs { margin-bottom: var(--space-2, 0.5rem); color: var(--helmia-orter-muted); font-size: .95rem; }
.breadcrumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1, 0.25rem); }
.breadcrumb-item:not(:first-child) { display: inline-flex; align-items: center; gap: var(--space-1, 0.25rem); }
.breadcrumb-item a { color: var(--helmia-orter-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--helmia-orter-primary); }
.breadcrumb-separator { opacity: .6; margin: 0; }
.breadcrumb-current { color: var(--helmia-orter-text); font-weight: 600; }

/* Frontend meta information */
.helmia-admin-edit {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

@media (min-width: 768px) {
    .helmia-admin-edit {
        flex-direction: row;
        align-items: flex-start;
        gap: 24px;
    }
}

.helmia-meta-frontend {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.3;
    max-width: fit-content;
}

.meta-info-line {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.meta-info-line span {
    white-space: nowrap;
    color: #495057;
}

.meta-info-line strong {
    color: #212529;
    font-weight: 600;
}

.meta-info-line .modified {
    color: #dc3545;
}

.meta-info-line .modified strong {
    color: #dc3545;
}

.meta-info-line .post-id {
    color: #6c757d;
    font-size: 11px;
    margin-left: auto;
}

@media (max-width: 767px) {
    .meta-info-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    
    .meta-info-line .post-id {
        margin-left: 0;
    }
}

/*
 * single-ort-family: /aga/verkstad/…/boka-*
 * Standard .ort-columns--family visar sidospalt före huvudkolumn på mobil (order).
 * På bokningssidor ska formulär och ingress komma först – annars upplevs sidan fel och "ful".
 */
.ort-columns--family.ort-columns--booking .ort-col--main {
  order: 1;
}
.ort-columns--family.ort-columns--booking .ort-col--side {
  order: 2;
}

/* Generisk Originalservice utan sidospalt: en kolumn i full bredd */
@media (min-width: 960px) {
  .ort-columns--family.ort-columns--booking.ort-columns--booking-main-only {
    grid-template-columns: 1fr;
  }
}

/* Originalservice: Tacdis-yta + två informationskort (samma visuella språk som .side-panel) */
.hod-originalservice-blocks--embed {
  margin-bottom: var(--space-8, 2rem);
  padding: var(--space-6, 1.5rem);
  background: var(--wp--preset--color--white, #fff);
  border: 1px solid var(--helmia-orter-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 28, 137, 0.06);
}
.hod-originalservice-blocks--embed > .wp-block-html:first-child:last-child {
  margin: 0;
}

/*
 * Tacdis ecom-retailer-booking: wrapper med Helmia-kort (t.ex. WP-sidor utan .hod-originalservice-blocks--embed).
 * Inuti .hod-originalservice-blocks--embed undviks dubbel ram — yttre block bär redan kortstil.
 */
.hod-ecom-retailer-booking.hod-ecom-retailer-booking--embed {
  margin-bottom: var(--space-8, 2rem);
  padding: var(--space-6, 1.5rem);
  background: var(--wp--preset--color--white, #fff);
  border: 1px solid var(--helmia-orter-border);
  border-radius: var(--helmia-radius-md, 12px);
  box-shadow: var(--helmia-shadow-sm, 0 1px 2px rgba(0, 28, 137, 0.06));
}
.hod-originalservice-blocks--embed .hod-ecom-retailer-booking.hod-ecom-retailer-booking--embed {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.hod-ecom-retailer-booking.hod-ecom-retailer-booking--embed > ecom-retailer-booking {
  display: block;
}

/*
 * Tacdis ecom-retailer-booking: försök matcha Helmia (primärfärg, text, radie).
 * Shadow DOM: endast det som komponenten uttryckligen läser som var(--...) påverkas;
 * ärvd color/font-family kan ändå slå igenom om inget hårt sätts inuti.
 */
.hod-originalservice-blocks--embed ecom-retailer-booking,
.hod-ecom-retailer-booking.hod-ecom-retailer-booking--embed ecom-retailer-booking {
  --border-radius: var(--helmia-radius-md, 0.375rem);
  --radius: var(--helmia-radius-md, 0.375rem);
  --text-color: var(--text-primary, #14171a);
  --background-color: var(--bg-primary, #fff);
  --border-color: var(--border-light, #e5e9f0);
  color: var(--text-primary, #14171a);
  font-family: inherit;
}

/* Originalservice SEO-block: samma rubrikmönster som tema (.helmia-section-heading), kort lik embed-ytan */
.hod-originalservice-auto-sections {
  display: grid;
  gap: var(--space-6, 1.5rem);
}
.hod-os-auto-section {
  margin: 0;
  padding: var(--space-6, 1.5rem);
  background: var(--wp--preset--color--white, #fff);
  border: 1px solid var(--helmia-orter-border);
  border-radius: var(--helmia-radius-md, 12px);
  box-shadow: var(--helmia-shadow-sm, 0 1px 2px rgba(0, 28, 137, 0.04));
}
/* Andra stycket: diskret alternerande yta (jfr master 10.1.5 växling) utan att konkurrera med formulärramen */
.hod-os-auto-section--alt {
  background: var(--bg-secondary, var(--helmia-orter-bg));
  border-color: var(--border-light, var(--helmia-orter-border));
}
.hod-os-auto-section .hod-os-auto-section__heading {
  margin-bottom: var(--space-4, 1rem);
}
/* Tydligare H2 i kort än global .site-main h2 (behåll section-heading-proportioner) */
.hod-os-auto-section .hod-os-auto-section__heading .helmia-section-heading__title {
  font-size: var(--helmia-heading-h3-size, 1.5rem);
  font-weight: var(--helmia-font-weight-medium, 500);
}
@media (min-width: 768px) {
  .hod-os-auto-section .hod-os-auto-section__heading .helmia-section-heading__title {
    font-size: var(--helmia-font-size-2xl, 1.5rem);
  }
}
.hod-os-auto-section__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--helmia-orter-text);
}
@media (min-width: 960px) {
  .hod-originalservice-auto-sections {
    gap: var(--space-8, 2rem);
  }
}

/* Opening Hours Styles */
.opening-hours {
    margin: 20px 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.opening-hours h3,
.opening-hours h4 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #333;
}

.today-status {
    padding: 8px 12px;
    margin-bottom: 16px;
    border-radius: 4px;
    font-weight: 500;
}

.today-status.open {
    background: #e7f5e7;
    color: #2d5a2d;
    border-left: 4px solid #4caf50;
}

.today-status.closed {
    background: #ffeaea;
    color: #721c24;
    border-left: 4px solid #f44336;
}

.opening-hours-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.opening-hours-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
}

.opening-hours-table td:first-child {
    font-weight: 500;
    width: 30%;
}

.opening-hours-list {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}

.opening-hours-list li {
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}

.opening-hours-list li:last-child {
    border-bottom: none;
}

.department-hours-summary {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
}

.department-hours-summary:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.department-hours-summary h4 {
    margin-bottom: 8px;
    color: #007cba;
}

.upcoming-exceptions {
    margin-top: 24px;
    padding: 16px;
    background: #fff8e1;
    border-left: 4px solid #ff9800;
    border-radius: 4px;
}

.upcoming-exceptions h4 {
    margin-top: 0;
    color: #e65100;
}

.exception-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
}

.exception-item {
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
}

.exception-item:last-child {
    border-bottom: none;
}

/* Admin Opening Hours Styles */
.opening-hours-template,
.opening-hours-assignment,
.opening-hours-exceptions {
    margin: 20px 0;
}

.red-days-year {
    margin-bottom: 20px;
    padding: 16px;
    background: #f9f9f9;
    border-radius: 4px;
}

.red-day-item {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    background: white;
    border-radius: 4px;
}

.red-day-item input[type="date"],
.red-day-item input[type="text"] {
    flex: 1;
}

.exception-period {
    margin-bottom: 24px;
    padding: 16px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.exception-period h4 {
    margin-top: 0;
    color: #495057;
}

.exception-period .form-table {
    margin-top: 12px;
}

/* Contact Panel Opening Hours */
.contact-row.contact-hours .hours-status {
    display: inline;
    font-weight: normal;
}

.contact-row.contact-hours .hours-status.open {
    color: #2d5a2d;
}

.contact-row.contact-hours .hours-status.closed {
    color: #721c24;
}

.contact-row.contact-hours small {
    color: #666;
    font-size: 12px;
}

/* Kompakt mellanrum mellan idag-rad och ordinarie */
.contact-row.contact-hours span {
    display: inline-block;
    margin-bottom: 6px; /* "halvt br"-känsla */
}

/* Responsive */
@media (max-width: 768px) {
    .red-day-item {
        flex-direction: column;
        align-items: stretch;
    }
    
    .opening-hours-table td:first-child {
        width: 40%;
    }
    
    .today-status {
        text-align: center;
    }

    .helmia-container {
        padding: 0 20px;
    }
}