/*
Theme Name: FiveStar Catalog
Description: FiveStar Cable product showcase with the original brand and homepage photography.
Version: 1.0.1
Requires at least: 6.8
Requires PHP: 8.3
Text Domain: fivestar-catalog
*/

:root {
    --fs-blue: #343993;
    --fs-deep-blue: #252a79;
    --fs-red: #d60606;
    --fs-ink: #25262a;
    --fs-line: #e4e5ec;
    --fs-gutter: clamp(1rem, 3vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #f6f6f6; color: var(--fs-ink); font: 1rem/1.55 Arial, Helvetica, sans-serif; }
a { color: var(--fs-deep-blue); }
a:hover { text-decoration: none; }
:where(a, input, button, summary):focus-visible { outline: 3px solid #f49d10; outline-offset: 3px; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; }

.fs-wrap { max-width: 1300px; margin-inline: auto; padding-inline: var(--fs-gutter); }
.fs-header { background: #f6f6f6; }
.fs-contact { background: #ededed; color: #353535; font-size: .88rem; }
.fs-contact-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.3rem; padding-block: .5rem; }
.fs-contact a { color: inherit; text-decoration: none; }
.fs-contact a:hover { text-decoration: underline; }
.fs-brand-row { display: flex; align-items: center; gap: clamp(2rem, 7vw, 6rem); min-height: 152px; }
.fs-brand { flex: 0 1 265px; }
.fs-brand img { display: block; width: 260px; max-width: 100%; }
.fs-brand-text { color: var(--fs-red); font-size: 1.75rem; font-weight: 700; text-decoration: none; }
.fs-tagline { margin: .65rem 0 0; color: #555; font-style: italic; }
.fs-search { display: flex; align-items: stretch; flex: 1 1 300px; max-width: 720px; }
.fs-search input { min-width: 0; width: 100%; padding: .75rem .85rem; border: 1px solid var(--fs-line); border-radius: 4px 0 0 4px; font: inherit; }
.fs-search button { padding: .75rem 1.25rem; border: 0; border-radius: 0 4px 4px 0; background: var(--fs-deep-blue); color: #fff; font: inherit; cursor: pointer; }

.fs-menu-bar { background: var(--fs-blue); color: white; }
.fs-menu-inner { display: flex; align-items: stretch; gap: .4rem; }
.fs-all-categories, .fs-menu a, .fs-mobile-nav summary { color: #fff; text-decoration: none; }
.fs-all-categories { display: flex; align-items: center; justify-content: center; padding: 0 1.7rem; background: var(--fs-deep-blue); font-weight: 700; text-transform: uppercase; }
.fs-menu, .fs-menu ul { list-style: none; margin: 0; padding: 0; }
.fs-menu { display: flex; align-items: stretch; flex-wrap: wrap; }
.fs-menu > li { position: relative; }
.fs-menu a { display: block; padding: 1.15rem .95rem; font-size: .91rem; }
.fs-menu > li > a { text-transform: uppercase; }
.fs-menu .current-menu-item > a, .fs-menu a:hover, .fs-menu a:focus-visible, .fs-all-categories:hover { background: #232874; }
.fs-desktop-nav .sub-menu {
    display: none;
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 0;
    width: clamp(12rem, 20vw, 18rem);
    background: var(--fs-deep-blue);
    border: 1px solid #4d54a4;
}
.fs-desktop-nav .sub-menu .sub-menu { left: 100%; top: 0; }
.fs-desktop-nav .sub-menu > li { position: relative; }
.fs-desktop-nav .sub-menu a { padding: .6rem .85rem; }
.fs-desktop-nav li:hover > .sub-menu, .fs-desktop-nav li:focus-within > .sub-menu { display: block; }
.fs-desktop-nav .menu-item-has-children > a::after { content: ' ▾'; margin-left: .25em; }
.fs-mobile-nav { display: none; }

.fs-main { min-height: 52vh; background: #fff; padding-block: clamp(1.5rem, 4vw, 3.5rem); }
.fs-main-home { padding-block-start: 1rem; }
.fs-entry-title { margin: 0 0 1.25rem; font-size: clamp(1.65rem, 3vw, 2.6rem); }
.fs-search-result { margin-block: .7rem; font-size: 1.12rem; }
.fs-content { overflow-wrap: anywhere; }
.fs-content .wp-block-image img { vertical-align: middle; }
.fs-content > p { max-width: 76ch; }
.fs-edit { display: inline-block; margin-block: .85rem; }

.fs-main .fs-home-hero { position: relative; isolation: isolate; overflow: hidden; background: #f2f2f5; }
.fs-main .fs-home-hero .wp-block-image { margin: 0 !important; }
.fs-main .fs-home-hero img { display: block; width: 100%; aspect-ratio: 2.7; object-fit: cover; }
.fs-main .fs-hero-copy { position: absolute; inset: 0; display: grid; align-items: center; align-content: center; justify-items: center; padding: 1rem; text-align: center; }
.fs-main .fs-hero-copy > .wp-block-group__inner-container { display: grid; justify-items: center; }
.fs-hero-copy :is(h1, h2).wp-block-heading {
    width: fit-content;
    max-width: 22ch;
    margin: 0 0 .9rem;
    padding: .26em .45em;
    background: rgba(255,255,255,.92);
    border-radius: .18em;
    color: #1c1d21;
    font-size: clamp(1.75rem, 4vw, 3.1rem);
    font-weight: 700;
}
.fs-hero-copy :is(h3, p) { margin: 0; }
@media (min-width: 1000px) {
    .fs-hero-copy :is(h1, h2).wp-block-heading { max-width: 32ch; }
}
.fs-hero-copy :is(h3, p) > a,
.fs-category-card .wp-block-heading > a,
.fs-content .wp-block-button__link {
    display: inline-block;
    border-radius: 3px;
    background: var(--fs-red);
    color: white;
    padding: .62em 1.15em;
    font-size: .94rem;
    font-weight: 700;
    text-decoration: none;
}
.fs-hero-copy :is(h3, p) > a:hover, .fs-category-card .wp-block-heading > a:hover, .fs-content .wp-block-button__link:hover { background: #af0808; }

.fs-category-grid, .fs-promo-grid, .fs-product-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.9rem, 2vw, 1.65rem);
    margin-block: clamp(1.3rem, 3vw, 2.5rem);
}
.fs-category-grid > .wp-block-group__inner-container,
.fs-promo-grid > .wp-block-group__inner-container,
.fs-product-grid > .wp-block-group__inner-container { display: contents; }
.fs-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fs-category-card, .fs-catalog-card { min-width: 0; margin: 0 !important; text-align: center; }
.fs-category-card .wp-block-image, .fs-catalog-card .wp-block-image, .fs-promo-grid .wp-block-image { margin: 0; }
.fs-category-card img { display: block; width: 100%; aspect-ratio: 2.2; object-fit: contain; }
.fs-category-card .wp-block-heading { margin: .65rem 0 0; }
.fs-promo-grid .wp-block-image img { width: 100%; aspect-ratio: 313 / 120; object-fit: contain; }
.fs-catalog-card { padding: .9rem; border: 1px solid var(--fs-line); border-radius: 5px; }
.fs-catalog-card img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.fs-catalog-card .wp-block-heading { margin: .75rem 0 .25rem; font-size: 1rem; }
.fs-section > .wp-block-group__inner-container > .wp-block-heading { margin-block: 1.3rem .75rem; }

.fs-footer { margin-top: 2rem; background: #24262a; color: #f1f1f3; }
.fs-footer-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding-block: 1.8rem; }
.fs-footer-menu { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.fs-footer-menu a { color: #fff; }
.fs-footer-credit { padding-block: .95rem; border-top: 1px solid #45464d; background: #1d1f22; font-size: .9rem; }
.screen-reader-text { position: absolute; clip: rect(0,0,0,0); overflow: hidden; width: 1px; height: 1px; }
.screen-reader-text:focus { clip: auto; overflow: visible; width: auto; height: auto; top: .5rem; left: .5rem; z-index: 10; background: white; padding: .55rem; }

@media (max-width: 960px) {
    .fs-brand-row { min-height: 125px; }
    .fs-menu a { padding-inline: .7rem; }
    .fs-all-categories { padding-inline: .85rem; }
    .fs-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .fs-brand-row { flex-wrap: wrap; justify-content: center; gap: .6rem; padding-block: .85rem; }
    .fs-brand { flex: 1 1 100%; text-align: center; }
    .fs-brand img { width: min(220px, 100%); margin-inline: auto; }
    .fs-tagline { margin-top: .25rem; font-size: .9rem; }
    .fs-search { flex-basis: 100%; max-width: 34rem; }
    .fs-search input, .fs-search button { padding: .5rem .65rem; }
    .fs-contact-inner { justify-content: center; gap: .2rem .8rem; font-size: .76rem; }
    .fs-menu-inner { align-items: start; justify-content: space-between; }
    .fs-all-categories { padding: .6rem .75rem; font-size: .84rem; }
    .fs-desktop-nav { display: none; }
    .fs-mobile-nav { display: block; position: relative; }
    .fs-mobile-nav summary { padding: .55rem .6rem; cursor: pointer; }
    .fs-mobile-nav nav { position: absolute; z-index: 5; top: 100%; right: 0; width: 14rem; background: var(--fs-deep-blue); }
    .fs-mobile-nav .fs-menu { display: block; }
    .fs-mobile-nav .fs-menu a { padding: .6rem .75rem; }
    .fs-main .fs-home-hero img { aspect-ratio: 1.55; }
    .fs-category-grid, .fs-promo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
    .fs-product-grid, .fs-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .fs-hero-copy :is(h1, h2).wp-block-heading { margin-bottom: .55rem; font-size: clamp(1.25rem, 6vw, 1.8rem); }
    .fs-category-grid { grid-template-columns: 1fr; }
    .fs-category-card img { aspect-ratio: 2.8; }
    .fs-promo-grid { grid-template-columns: 1fr; }
    .fs-promo-grid .wp-block-image { max-width: 313px; margin-inline: auto; }
    .fs-footer-columns { grid-template-columns: 1fr; }
    .fs-footer-columns > [aria-hidden="true"] { display: none; }
}