/* ==========================================================
   MFRE 2026.10.31-0042
   FLORIDA COUNTY RESOURCE FINDER
========================================================== */


/* ----------------------------------------------------------
   DIRECTORY HERO
---------------------------------------------------------- */

.resource-directory-page {
  background:
    var(--mfre-ivory);
}

.resource-directory-page .site__content {
  background:
    var(--mfre-ivory);
}

.resource-directory__hero {
  position: relative;

  width: 100%;

  padding:
    58px 24px 64px;

  overflow: hidden;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(223, 194, 127, 0.13),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      var(--mfre-wine-900),
      var(--mfre-wine-950)
    );
}

.resource-directory__hero-inner {
  width: 100%;
  max-width: 850px;

  margin: 0 auto;
}

.resource-directory__logo-link {
  display: inline-block;

  margin:
    0 auto 30px;

  border:
    0 !important;

  text-decoration:
    none !important;
}

.resource-directory__logo {
  display: block;

  width:
    min(260px, 66vw);

  height: auto;

  margin: 0 auto;
}

.resource-directory__eyebrow {
  display: block;

  margin-bottom: 10px;

  color:
    var(--mfre-gold-bright);

  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.resource-directory__hero h1 {
  margin:
    0 0 16px;

  color:
    var(--mfre-white);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2.65rem, 6vw, 4.8rem);

  font-weight: 500;
  line-height: 1;

  letter-spacing:
    -0.045em;
}

.resource-directory__hero p {
  max-width: 680px;

  margin:
    0 auto;

  color:
    rgba(255, 255, 255, 0.76);

  font-size: 1rem;
  line-height: 1.7;
}


/* ----------------------------------------------------------
   RESOURCE NAV
---------------------------------------------------------- */

.resource-directory__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 26px;
}

.resource-directory__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;

  padding:
    10px 15px;

  color:
    var(--mfre-silver-bright) !important;

  background:
    rgba(255, 255, 255, 0.04);

  border:
    1px solid rgba(217, 221, 225, 0.24) !important;

  border-radius: 2px;

  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.08em;

  text-decoration:
    none !important;

  text-transform:
    uppercase;
}

.resource-directory__nav a:hover,
.resource-directory__nav a:focus {
  color:
    var(--mfre-white) !important;

  border-color:
    var(--mfre-gold-bright) !important;
}

.resource-directory__nav a[aria-current="page"] {
  color:
    var(--mfre-black) !important;

  background:
    var(--mfre-gold-bright);

  border-color:
    var(--mfre-gold-bright) !important;
}


/* ----------------------------------------------------------
   COUNTY FINDER
---------------------------------------------------------- */

.county-finder {
  position: relative;

  width: 100%;

  padding:
    76px 24px 84px;

  background:
    var(--mfre-ivory);
}

.county-finder__inner {
  width: 100%;
  max-width: 1040px;

  margin: 0 auto;
}

.county-finder__heading {
  max-width: 720px;

  margin:
    0 auto 32px;

  text-align: center;
}

.county-finder__eyebrow {
  display: block;

  margin-bottom: 9px;

  color:
    var(--mfre-wine-700);

  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.15em;

  text-transform:
    uppercase;
}

.county-finder__heading h2 {
  margin:
    0 0 14px;

  color:
    var(--mfre-black);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2.25rem, 5vw, 3.7rem);

  font-weight: 500;
  line-height: 1;

  letter-spacing:
    -0.04em;
}

.county-finder__heading p {
  max-width: 620px;

  margin: 0 auto;

  color:
    #575052;

  font-size: 1rem;
  line-height: 1.65;
}


/* ----------------------------------------------------------
   SEARCH CONTROL
---------------------------------------------------------- */

.county-finder__search {
  width: 100%;
  max-width: 760px;

  margin:
    0 auto;

  padding:
    26px;

  background:
    var(--mfre-white);

  border:
    1px solid rgba(49, 8, 13, 0.12);

  border-top:
    3px solid var(--mfre-gold);

  box-shadow:
    0 18px 44px rgba(49, 8, 13, 0.10);
}

.county-finder__label {
  display: block;

  margin-bottom: 8px;

  color:
    var(--mfre-black);

  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.10em;

  text-transform:
    uppercase;
}

.county-finder__controls {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 10px;
}

.county-finder__input {
  width: 100%;
  min-width: 0;
  min-height: 50px;

  padding:
    12px 15px;

  color:
    var(--mfre-black);

  background:
    #ffffff;

  border:
    1px solid #aaa1a3;

  border-radius: 2px;

  font: inherit;

  font-size: 1rem;

  outline: none;
}

.county-finder__input:focus {
  border-color:
    var(--mfre-wine-700);

  box-shadow:
    0 0 0 3px rgba(101, 24, 34, 0.12);
}

.county-finder__input::placeholder {
  color:
    #81797b;
}

.county-finder__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 50px;

  padding:
    12px 22px;

  color:
    var(--mfre-white);

  background:
    var(--mfre-wine-800);

  border:
    1px solid var(--mfre-wine-800);

  border-radius: 2px;

  cursor: pointer;

  font: inherit;

  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;

  text-transform:
    uppercase;
}

.county-finder__button:hover,
.county-finder__button:focus {
  color:
    var(--mfre-black);

  background:
    var(--mfre-gold-bright);

  border-color:
    var(--mfre-gold-bright);
}

.county-finder__status {
  min-height: 1.3em;

  margin:
    9px 0 0;

  color:
    #6c6567;

  font-size: 0.82rem;
  line-height: 1.45;
}


/* ----------------------------------------------------------
   COUNTY RESULT
---------------------------------------------------------- */

.county-result {
  width: 100%;

  margin:
    38px auto 0;

  padding:
    32px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #fbf8f2
    );

  border:
    1px solid rgba(49, 8, 13, 0.13);

  box-shadow:
    0 22px 54px rgba(49, 8, 13, 0.11);
}

.county-result[hidden] {
  display: none;
}

.county-result__heading {
  margin-bottom: 24px;

  text-align: center;
}

.county-result__eyebrow {
  display: block;

  margin-bottom: 6px;

  color:
    var(--mfre-wine-700);

  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;

  text-transform:
    uppercase;
}

.county-result__heading h2 {
  margin:
    0 0 7px;

  color:
    var(--mfre-black);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2rem, 4vw, 3rem);

  font-weight: 500;
  line-height: 1.05;

  letter-spacing:
    -0.035em;
}

.county-result__heading p {
  margin: 0;

  color:
    #665f61;

  font-size: 0.92rem;
}


/* ----------------------------------------------------------
   RESOURCE RESULTS
---------------------------------------------------------- */

.county-result__resources {
  display: flex;
  align-items: stretch;

  gap: 14px;

  width: 100%;
}

.county-resource {
  position: relative;

  display: flex;

  flex:
    1 1 0;

  flex-direction: column;

  order: 1;

  min-width: 0;
  min-height: 260px;

  padding:
    24px;

  background:
    #ffffff;

  border:
    1px solid rgba(49, 8, 13, 0.12);

  border-top:
    3px solid var(--mfre-silver-dark);

  box-shadow:
    0 12px 30px rgba(49, 8, 13, 0.07);
}

.county-resource--primary {
  order: 0;

  border-top-color:
    var(--mfre-gold);

  background:
    linear-gradient(
      180deg,
      rgba(223, 194, 127, 0.10),
      #ffffff 35%
    );
}

.county-resource--primary::before {
  content: "Featured";

  position: absolute;

  top: 12px;
  right: 12px;

  color:
    var(--mfre-wine-700);

  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.12em;

  text-transform:
    uppercase;
}

.county-resource__eyebrow {
  display: block;

  margin-bottom: 7px;

  color:
    var(--mfre-wine-700);

  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;

  text-transform:
    uppercase;
}

.county-resource h3 {
  margin:
    0 0 11px;

  color:
    var(--mfre-black);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.1;
}

.county-resource p {
  margin:
    0 0 22px;

  color:
    #615a5c;

  font-size: 0.89rem;
  line-height: 1.58;
}

.county-resource__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  align-self: flex-start;

  min-height: 42px;

  margin-top: auto;

  padding:
    10px 14px;

  color:
    var(--mfre-white) !important;

  background:
    var(--mfre-wine-800);

  border:
    1px solid var(--mfre-wine-800) !important;

  border-radius: 2px;

  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;

  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
}

.county-resource__link:hover,
.county-resource__link:focus {
  color:
    var(--mfre-black) !important;

  background:
    var(--mfre-gold-bright);

  border-color:
    var(--mfre-gold-bright) !important;
}

.county-result__utility-note {
  max-width: 760px;

  margin:
    22px auto 0;

  color:
    #71696b;

  font-size: 0.78rem;
  line-height: 1.55;

  text-align: center;
}


/* ----------------------------------------------------------
   QUICK GUIDE
---------------------------------------------------------- */

.resource-directory__quick-guide {
  width: 100%;

  padding:
    66px 24px 80px;

  background:
    #ffffff;

  border-top:
    1px solid rgba(49, 8, 13, 0.09);
}

.resource-directory__quick-guide-inner {
  width: 100%;
  max-width: 980px;

  margin: 0 auto;
}

.resource-directory__quick-guide h2 {
  margin:
    0 0 26px;

  color:
    var(--mfre-black);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.9rem, 4vw, 2.8rem);

  font-weight: 500;
  line-height: 1;

  text-align: center;
}

.resource-directory__quick-guide-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.resource-directory__quick-guide-grid div {
  padding:
    18px 0;

  border-top:
    2px solid var(--mfre-gold);
}

.resource-directory__quick-guide-grid strong {
  display: block;

  margin-bottom: 7px;

  color:
    var(--mfre-black);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1.15rem;
  font-weight: 500;
}

.resource-directory__quick-guide-grid span {
  display: block;

  color:
    #665f61;

  font-size: 0.87rem;
  line-height: 1.55;
}


/* ----------------------------------------------------------
   NO SCRIPT
---------------------------------------------------------- */

.county-finder__noscript {
  max-width: 760px;

  margin:
    28px auto 0;

  padding:
    18px;

  color:
    #534c4e;

  background:
    #ffffff;

  border-left:
    3px solid var(--mfre-gold);
}

.county-finder__noscript p {
  margin:
    5px 0 10px;
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width: 820px) {

  .county-result__resources {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .county-resource--primary {
    grid-column:
      1 / -1;

    min-height: 220px;
  }

  .resource-directory__quick-guide-grid {
    grid-template-columns:
      1fr;
  }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 620px) {

  .resource-directory__hero {
    padding:
      44px 18px 52px;
  }

  .resource-directory__logo {
    width:
      min(230px, 70vw);
  }

  .resource-directory__nav {
    display: grid;

    grid-template-columns:
      1fr;

    max-width: 330px;

    margin:
      24px auto 0;
  }

  .resource-directory__nav a {
    width: 100%;
  }

  .county-finder {
    padding:
      54px 16px 64px;
  }

  .county-finder__controls {
    grid-template-columns:
      1fr;
  }

  .county-finder__button {
    width: 100%;
  }

  .county-finder__search {
    padding:
      21px 18px;
  }

  .county-result {
    width: 100%;
    max-width: 100%;

    height: auto;
    min-height: 0;

    margin-top: 28px;

    padding:
      24px 18px;

    overflow: visible;
  }

  /*
   * MOBILE RESOURCE RESET
   *
   * The tablet layout above turns these resources into a
   * two-column grid. On phones we deliberately eliminate
   * all grid placement and use a basic vertical flex stack.
   *
   * This applies to all three directory pages:
   * Property Appraiser
   * Tax Collector
   * Utility Companies
   */

  .county-result__resources {
    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      stretch !important;

    justify-content:
      flex-start !important;

    gap:
      16px !important;

    grid-template-columns:
      none !important;

    grid-template-rows:
      none !important;

    grid-auto-columns:
      auto !important;

    grid-auto-rows:
      auto !important;

    grid-auto-flow:
      row !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow:
      visible !important;
  }

  /*
   * Reset all individual cards.
   *
   * This specifically removes the full-row grid placement
   * inherited by .county-resource--primary at tablet width.
   */

  .county-result__resources > .county-resource,
  .county-resource,
  .county-resource--primary {
    position:
      relative !important;

    top:
      auto !important;

    right:
      auto !important;

    bottom:
      auto !important;

    left:
      auto !important;

    inset:
      auto !important;

    display:
      flex !important;

    flex:
      0 0 auto !important;

    flex-direction:
      column !important;

    align-self:
      stretch !important;

    justify-self:
      stretch !important;

    grid-column:
      auto !important;

    grid-row:
      auto !important;

    grid-area:
      auto !important;

    order:
      0 !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    margin:
      0 !important;

    transform:
      none !important;

    translate:
      none !important;

    overflow:
      visible !important;

    box-sizing:
      border-box !important;
  }

  /*
   * Keep the currently focused directory card first.
   */

  .resource-directory-page[data-directory-focus="appraiser"]
  .county-resource--primary,

  .resource-directory-page[data-directory-focus="tax"]
  .county-resource--primary,

  .resource-directory-page[data-directory-focus="utility"]
  .county-resource--primary {
    order:
      -1 !important;
  }

  .county-resource--primary::before {
    top: 11px;
    right: 11px;
  }

  .county-resource__eyebrow {
    position:
      static !important;

    display:
      block !important;

    width:
      auto !important;

    margin:
      0 0 7px !important;
  }

  .county-resource h3 {
    position:
      static !important;

    width:
      100% !important;

    margin:
      0 0 11px !important;

    overflow-wrap:
      anywhere;
  }

  .county-resource p {
    position:
      static !important;

    width:
      100% !important;

    margin:
      0 0 20px !important;

    overflow-wrap:
      anywhere;
  }

  .county-resource__link {
    position:
      static !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    align-self:
      stretch !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin-top:
      auto !important;

    white-space:
      normal !important;

    text-align:
      center !important;

    overflow-wrap:
      anywhere;
  }

  .county-result__utility-note {
    width: 100%;

    margin:
      20px auto 0;
  }

  .resource-directory__quick-guide {
    padding:
      52px 18px 62px;
  }

}


/* ----------------------------------------------------------
   VERY SMALL PHONES
---------------------------------------------------------- */

@media (max-width: 420px) {

  .county-finder {
    padding-right: 13px;
    padding-left: 13px;
  }

  .county-result {
    padding:
      20px 14px;
  }

  .county-result__resources {
    gap:
      13px !important;
  }

  .county-resource,
  .county-resource--primary {
    padding:
      20px 17px !important;
  }

  .county-resource h3 {
    font-size:
      1.45rem;
  }

}