/*
Theme Name: Radio Nordfyn
Theme URI: https://radio-nordfyn.dk/
Author: Radio Nordfyn
Author URI: https://radio-nordfyn.dk/
Description: Officielt WordPress-tema til Radio Nordfyn – en frivilligdrevet lokalradio på 94,2 FM fra Bogense. Varm, redaktionel stemning med direkte-afspiller, sendeplan, nyheder og værterne bag mikrofonen.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: radio-nordfyn
Tags: local-radio, one-column, custom-menu, custom-logo, featured-images, translation-ready
*/

/* =========================================================================
   Radio Nordfyn — design tokens
   Palette: Ink black / Electric blue / Steel / Sunset amber / Cool white
   Type: Newsreader (editorial serif) + Manrope (interface sans)
   ========================================================================= */

:root{
  --rn-navy:      #0B0F14;
  --rn-coral:     #0A84FF;
  --rn-coral-dark:#0868c7;
  --rn-teal:      #445A6B;
  --rn-gold:      #E8A052;
  --rn-parchment: #F2F5F8;
  --rn-border:    #DCE3E9;
  --rn-muted:     #6B7480;   /* eyebrow / secondary text on light bg */
  --rn-body:      #3A414A;   /* paragraph text on light bg */
  --rn-cream:     #F4F7FA;   /* primary text on dark bg */
  --rn-cream-2:   #AEB8C2;   /* secondary text on dark bg */
  --rn-cream-3:   #8993A0;   /* tertiary text on dark bg */
  --rn-white:     #ffffff;

  --rn-radius-sm: 10px;
  --rn-radius-md: 14px;
  --rn-radius-lg: 18px;
  --rn-radius-xl: 26px;

  --rn-shadow-card: 0 1px 2px rgba(11,15,20,.04), 0 8px 24px rgba(11,15,20,.06);
  --rn-shadow-pop:  0 12px 32px rgba(11,15,20,.14);

  --rn-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --rn-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --rn-container: 1160px;
}

/* =========================================================================
   Reset / base
   ========================================================================= */

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--rn-parchment);
  color: var(--rn-body);
  font: 400 16px/1.6 var(--rn-sans);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: var(--rn-coral); text-decoration: none; }
a:hover{ color: var(--rn-coral-dark); }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6{ font-family: var(--rn-serif); font-weight: 500; color: var(--rn-navy); margin: 0 0 .5em; }
p{ margin: 0 0 1em; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: var(--rn-border); border-radius: 10px; }
.screen-reader-text{
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link{
  position: absolute; top: -60px; left: 12px; z-index: 10000;
  background: var(--rn-navy); color: var(--rn-cream); padding: 10px 18px;
  border-radius: 0 0 8px 8px; font: 600 13px/1 var(--rn-sans); transition: top .15s ease;
}
.skip-link:focus{ top: 0; color: var(--rn-cream); }

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

.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--rn-sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--rn-muted);
}
.eyebrow::before{
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rn-coral); flex-shrink: 0;
}

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 13px/1 var(--rn-sans); letter-spacing: .02em;
  padding: 13px 22px; border-radius: 999px; border: none;
  background: var(--rn-coral); color: var(--rn-navy);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{ background: var(--rn-coral-dark); color: #fff; transform: translateY(-1px); }
.btn.btn-outline{
  background: transparent; color: var(--rn-navy);
  border: 1px solid var(--rn-border);
}
.btn.btn-outline:hover{ background: var(--rn-navy); color: var(--rn-cream); border-color: var(--rn-navy); }

/* =========================================================================
   Site header
   ========================================================================= */

.site-header{
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--rn-border);
}
/* The frosted-glass layer lives on a pseudo-element: backdrop-filter on the
   header itself would make it the containing block for the fixed-position
   mobile nav (Chrome), collapsing the menu panel to a sliver of the header. */
.site-header::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(242,245,248,.92);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
.site-header__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 16px 24px;
}
.site-logo{ display: flex; align-items: center; gap: 10px; color: var(--rn-navy); }
.site-logo:hover{ color: var(--rn-navy); }
.site-logo__mark{ flex-shrink: 0; }
.site-logo__type{ display: flex; flex-direction: column; line-height: 1.1; }
.site-logo__name{ font: 500 19px/1 var(--rn-serif); color: var(--rn-navy); }
.site-logo__freq{ font: 700 11px/1 var(--rn-sans); letter-spacing: .1em; color: var(--rn-coral); margin-top: 5px; }
.custom-logo-link img{ max-height: 44px; width: auto; }

.primary-nav{ display: flex; align-items: center; gap: 4px; }
.primary-nav ul{ display: flex; align-items: center; gap: 2px; }
.primary-nav a{
  display: inline-block; padding: 10px 16px; border-radius: 999px;
  font: 600 13px/1 var(--rn-sans); color: var(--rn-navy); letter-spacing: .01em;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  background: var(--rn-navy); color: var(--rn-cream);
}

.header-actions{ display: flex; align-items: center; gap: 10px; }
.header-live-pill{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: rgba(10,132,255,.14); border: 1px solid rgba(10,132,255,.3);
  font: 700 11px/1 var(--rn-sans); letter-spacing: .08em; color: var(--rn-coral);
}
.header-live-pill .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--rn-coral); }
.header-live-pill.is-off{ opacity: .55; }
.header-live-pill.is-off .dot{ background: var(--rn-muted); }

.menu-toggle{
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--rn-border); background: transparent;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content: ''; display: block; width: 18px; height: 2px; background: var(--rn-navy); position: relative; transition: .2s;
}
.menu-toggle span::before{ position: absolute; top: -6px; }
.menu-toggle span::after{ position: absolute; top: 6px; }

@media (max-width: 860px){
  .primary-nav{
    position: fixed; inset: 68px 0 0 0; background: var(--rn-white);
    flex-direction: column; align-items: stretch; padding: 18px 24px;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    border-top: 1px solid var(--rn-border);
    box-shadow: var(--rn-shadow-pop);
  }
  .primary-nav ul{ flex-direction: column; align-items: stretch; gap: 6px; }
  .primary-nav a{
    padding: 14px 16px; font-size: 15px;
    max-width: none; white-space: normal; text-overflow: clip;
  }
  .site-header.is-open .primary-nav{ opacity: 1; transform: none; pointer-events: auto; }
  .menu-toggle{ display: inline-flex; }
  .header-live-pill span.label-full{ display: none; }
}

/* =========================================================================
   Live player (hero on front page)
   ========================================================================= */

.live-hero{
  background: var(--rn-navy); border-radius: var(--rn-radius-xl);
  padding: 36px; color: var(--rn-cream);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center;
  box-shadow: var(--rn-shadow-pop);
}
.live-card__status{ display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.live-card__dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--rn-coral); animation: rn-pulse 1.8s ease-in-out infinite; }
.live-card.is-offline .live-card__dot{ background: var(--rn-cream-3); animation: none; }
@keyframes rn-pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }
.live-card__label{ font: 700 12px/1 var(--rn-sans); letter-spacing: .12em; color: var(--rn-coral); text-transform: uppercase; }
.live-card.is-offline .live-card__label{ color: var(--rn-cream-3); }
.live-card__show{ font: 500 30px/1.25 var(--rn-serif); color: var(--rn-cream); margin: 0 0 6px; }
.live-card__host{ font: 400 15px/1.5 var(--rn-sans); color: var(--rn-cream-2); margin: 0 0 24px; }

.live-controls{ display: flex; align-items: center; gap: 18px; }
.live-play{
  width: 64px; height: 64px; border-radius: 50%; background: var(--rn-coral);
  border: none; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(10,132,255,.35); transition: transform .15s ease, background .15s ease;
}
.live-play:hover{ transform: scale(1.05); }
.live-play:disabled{ background: rgba(242,245,248,.15); box-shadow: none; cursor: not-allowed; }
.live-play svg{ display: block; }
.live-play .icon-play{ margin-left: 3px; }
.live-play .icon-pause{ display: none; }
.live-play.is-playing .icon-play{ display: none; }
.live-play.is-playing .icon-pause{ display: block; }

.waveform{ flex: 1; display: flex; align-items: flex-end; gap: 4px; height: 36px; }
.waveform span{
  flex: 1; max-width: 6px; border-radius: 3px; background: var(--rn-coral); opacity: .9;
  animation: rn-wave 1.1s ease-in-out infinite;
}
.waveform.is-idle span{ animation: none; height: 22% !important; opacity: .4; }
.waveform span:nth-child(1){ height: 40%; animation-delay: -1.0s; }
.waveform span:nth-child(2){ height: 80%; animation-delay: -0.8s; }
.waveform span:nth-child(3){ height: 55%; animation-delay: -0.6s; }
.waveform span:nth-child(4){ height: 95%; animation-delay: -0.4s; }
.waveform span:nth-child(5){ height: 35%; animation-delay: -0.9s; }
.waveform span:nth-child(6){ height: 70%; animation-delay: -0.3s; }
.waveform span:nth-child(7){ height: 50%; animation-delay: -0.5s; }
.waveform span:nth-child(8){ height: 25%; animation-delay: -0.2s; }
@keyframes rn-wave{ 0%,100%{ transform: scaleY(.4); } 50%{ transform: scaleY(1); } }

.live-offline-note{
  font: 400 14px/1.6 var(--rn-sans); color: var(--rn-cream-2);
  background: rgba(242,245,248,.06); border: 1px solid rgba(242,245,248,.12);
  border-radius: var(--rn-radius-md); padding: 14px 16px; margin-top: 18px; display: none;
}
.live-card.is-offline .live-offline-note{ display: block; }

.live-hero__meta{ display: flex; flex-direction: column; gap: 14px; }
.live-hero__meta .eyebrow{ color: var(--rn-cream-2); }
.live-hero__meta .eyebrow::before{ background: var(--rn-coral); }
.next-up{
  background: rgba(242,245,248,.05); border: 1px solid rgba(242,245,248,.1);
  border-radius: var(--rn-radius-md); padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.next-up + .next-up{ margin-top: 10px; }
.next-up__title{ font: 500 15px/1.3 var(--rn-serif); color: var(--rn-cream); }
.next-up__sub{ font: 400 12px/1.4 var(--rn-sans); color: var(--rn-cream-3); margin-top: 2px; }
.next-up__time{ font: 600 12px/1 var(--rn-sans); color: var(--rn-gold); flex-shrink: 0; }

/* .btn-outline defaults to navy text/border for use on light backgrounds;
   on the navy live-hero it needs to flip to cream or it's invisible. */
.live-hero__meta .btn-outline{ color: var(--rn-cream); border-color: rgba(242,245,248,.25); }
.live-hero__meta .btn-outline:hover{ background: var(--rn-cream); color: var(--rn-navy); border-color: var(--rn-cream); }

@media (max-width: 780px){
  .live-hero{ grid-template-columns: 1fr; padding: 24px; }
}

/* =========================================================================
   Section headings
   ========================================================================= */

.section{ padding: 64px 0; }
.section--tight{ padding: 40px 0; }
.section__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.section__title{ font: 500 32px/1.15 var(--rn-serif); color: var(--rn-navy); margin: 0; }
.section__sub{ font: 400 15px/1.5 var(--rn-sans); color: var(--rn-muted); margin-top: 6px; }
.section__link{ font: 600 13px/1 var(--rn-sans); color: var(--rn-coral); white-space: nowrap; }

/* =========================================================================
   Quick link cards (Program / Nyheder shortcuts)
   ========================================================================= */

.quick-links{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.quick-link{
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--rn-border); border-radius: var(--rn-radius-lg);
  padding: 20px; box-shadow: var(--rn-shadow-card); transition: transform .15s ease, box-shadow .15s ease;
}
.quick-link:hover{ transform: translateY(-2px); box-shadow: var(--rn-shadow-pop); }
.quick-link__icon{
  width: 48px; height: 48px; border-radius: 14px; background: var(--rn-parchment);
  display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
}
.quick-link__title{ font: 600 15px/1.3 var(--rn-sans); color: var(--rn-navy); }
.quick-link__desc{ font: 400 12px/1.4 var(--rn-sans); color: var(--rn-muted); margin-top: 2px; }

/* =========================================================================
   Schedule (Program page + "Senere i dag")
   ========================================================================= */

.day-tabs{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 24px; }
.day-tab{
  flex-shrink: 0; border: 1px solid var(--rn-border); background: transparent; color: var(--rn-muted);
  border-radius: 999px; padding: 10px 20px; font: 600 13px/1 var(--rn-sans);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.day-tab.is-active{ background: var(--rn-navy); color: var(--rn-cream); border-color: var(--rn-navy); }
.day-tab:hover:not(.is-active){ border-color: var(--rn-navy); color: var(--rn-navy); }

.schedule-list{ display: flex; flex-direction: column; gap: 12px; }
.schedule-day{ display: none; }
.schedule-day.is-active{ display: flex; flex-direction: column; gap: 12px; }
.schedule-row{
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border-radius: var(--rn-radius-lg); padding: 16px 18px;
  border-left: 3px solid var(--rn-teal); box-shadow: var(--rn-shadow-card);
}
.schedule-row.is-live{ border-left-color: var(--rn-coral); }
.schedule-row__time{ font: 700 13px/1.3 var(--rn-sans); color: var(--rn-teal); width: 68px; flex-shrink: 0; padding-top: 2px; }
.schedule-row.is-live .schedule-row__time{ color: var(--rn-coral); }
.schedule-row__title{ font: 500 17px/1.3 var(--rn-serif); color: var(--rn-navy); }
.schedule-row__meta{ font: 400 13px/1.4 var(--rn-sans); color: var(--rn-muted); margin-top: 2px; }
.schedule-row__meta .is-live-flag{ color: var(--rn-coral); font-weight: 600; }
.schedule-empty{ font: 400 14px/1.6 var(--rn-sans); color: var(--rn-muted); padding: 24px; text-align: center; background: #fff; border-radius: var(--rn-radius-lg); border: 1px dashed var(--rn-border); }

/* =========================================================================
   News cards (Nyheder)
   ========================================================================= */

.news-featured{
  background: var(--rn-navy); border-radius: var(--rn-radius-xl); overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; margin-bottom: 32px; box-shadow: var(--rn-shadow-card);
}
.news-featured__media{
  min-height: 220px; background: linear-gradient(135deg, var(--rn-teal), var(--rn-navy));
  display: flex; align-items: center; justify-content: center; font-size: 46px;
  background-size: cover; background-position: center;
}
.news-featured__body{ padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.news-featured__badge{ font: 600 10px/1 var(--rn-sans); letter-spacing: .08em; color: var(--rn-gold); text-transform: uppercase; margin-bottom: 10px; }
.news-featured__title{ font: 500 24px/1.3 var(--rn-serif); color: var(--rn-cream); margin: 0 0 10px; }
.news-featured__title a{ color: inherit; }
.news-featured__excerpt{ font: 400 14px/1.6 var(--rn-sans); color: var(--rn-cream-2); margin: 0; }
@media (max-width: 720px){ .news-featured{ grid-template-columns: 1fr; } }

.news-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.news-card{
  display: flex; gap: 14px; align-items: flex-start; background: #fff;
  border-radius: var(--rn-radius-lg); padding: 16px; border: 1px solid var(--rn-border);
  transition: transform .15s ease, box-shadow .15s ease;
}
.news-card:hover{ transform: translateY(-2px); box-shadow: var(--rn-shadow-card); }
.news-card__thumb{
  width: 64px; height: 64px; border-radius: 12px; background: var(--rn-border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden;
}
.news-card__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.news-card__title{ font: 500 15px/1.35 var(--rn-serif); color: var(--rn-navy); }
.news-card__title a{ color: inherit; }
.news-card__meta{ font: 400 11px/1.4 var(--rn-sans); color: var(--rn-muted); margin-top: 4px; }

/* single article */
.article-header{ max-width: 760px; margin: 0 auto 28px; text-align: left; }
.article-header .eyebrow{ margin-bottom: 14px; }
.article-title{ font: 500 38px/1.2 var(--rn-serif); color: var(--rn-navy); margin: 0 0 14px; }
.article-meta{ font: 400 13px/1 var(--rn-sans); color: var(--rn-muted); }
.article-thumb{ max-width: 900px; margin: 0 auto 32px; border-radius: var(--rn-radius-xl); overflow: hidden; }
.article-body{ max-width: 760px; margin: 0 auto; font: 400 17px/1.75 var(--rn-sans); color: var(--rn-body); }
.article-body h2{ font-size: 26px; margin-top: 1.6em; }
.article-body h3{ font-size: 21px; margin-top: 1.4em; }
.article-body a{ text-decoration: underline; }
.article-body blockquote{
  margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--rn-coral);
  font-family: var(--rn-serif); font-style: italic; color: var(--rn-navy); font-size: 19px;
}
.article-footer{ max-width: 760px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--rn-border); }

/* =========================================================================
   Hosts (Værter)
   ========================================================================= */

.hosts-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.host-card{
  background: #fff; border-radius: var(--rn-radius-lg); padding: 24px; text-align: center;
  border: 1px solid var(--rn-border); transition: transform .15s ease, box-shadow .15s ease;
}
.host-card:hover{ transform: translateY(-2px); box-shadow: var(--rn-shadow-card); }
.host-card__avatar{
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font: 600 22px/1 var(--rn-serif); color: #fff; background: var(--rn-teal);
}
.host-card__avatar img{ width: 100%; height: 100%; object-fit: cover; }
.host-card__name{ font: 500 16px/1.3 var(--rn-serif); color: var(--rn-navy); }
.host-card__name a{ color: inherit; }
.host-card__show{ font: 400 12px/1.4 var(--rn-sans); color: var(--rn-muted); margin-top: 3px; }

.host-single__header{ display: flex; align-items: center; gap: 22px; margin-bottom: 30px; }
.host-single__avatar{
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font: 600 30px/1 var(--rn-serif); color: #fff; background: var(--rn-teal);
}
.host-single__avatar img{ width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer{ background: var(--rn-navy); color: var(--rn-cream-2); margin-top: 80px; }
.site-footer__inner{ padding: 56px 24px 28px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer .site-logo__name{ color: var(--rn-cream); }
.site-footer p{ color: var(--rn-cream-2); font-size: 14px; }
.footer-col__title{ font: 600 12px/1 var(--rn-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--rn-cream-3); margin-bottom: 16px; }
.footer-col ul{ display: flex; flex-direction: column; gap: 10px; }
.footer-col a{ color: var(--rn-cream-2); font-size: 14px; }
.footer-col a:hover{ color: var(--rn-coral); }
.site-footer__bottom{
  border-top: 1px solid rgba(242,245,248,.1); padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font: 400 12px/1.5 var(--rn-sans); color: var(--rn-cream-3);
}
@media (max-width: 720px){ .site-footer__inner{ grid-template-columns: 1fr; } }

/* =========================================================================
   Misc: pagination, 404, widgets
   ========================================================================= */

.pagination{ display: flex; gap: 8px; justify-content: center; margin: 40px 0 0; }
.pagination a, .pagination span{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--rn-border);
  font: 600 13px/1 var(--rn-sans); color: var(--rn-navy);
}
.pagination .current{ background: var(--rn-navy); color: var(--rn-cream); border-color: var(--rn-navy); }

.not-found{ text-align: center; padding: 100px 24px; }
.not-found__code{ font: 500 96px/1 var(--rn-serif); color: var(--rn-coral); margin-bottom: 8px; }

.widget{ margin-bottom: 28px; }
.widget-title{ font: 600 12px/1 var(--rn-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--rn-muted); margin-bottom: 14px; }

.search-form{ display: flex; gap: 10px; }
.search-form .search-field{
  flex: 1; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--rn-border);
  background: #fff; font: 400 14px/1 var(--rn-sans); color: var(--rn-navy);
}
.search-form .search-field:focus{ outline: none; border-color: var(--rn-coral); }
.search-form .search-submit{
  padding: 12px 20px; border-radius: 999px; border: none; background: var(--rn-navy);
  color: var(--rn-cream); font: 700 13px/1 var(--rn-sans); flex-shrink: 0;
}
.search-form .search-submit:hover{ background: var(--rn-coral-dark); }

@media (max-width: 640px){
  .section{ padding: 44px 0; }
  .section__title{ font-size: 26px; }
}