/*
Theme Name:  559 Online
Theme URI:   https://559online.com
Description: Child theme for 559 Online — the 559 Network hub.
Author:      559 Digital LLC
Author URI:  https://559digital.co
Template:    559-framework
Version:     1.0.0
Text Domain: 559online
*/

/*
  BEGINNER NOTE — "Template:" must exactly match your parent theme FOLDER name.
  Check wp-content/themes/ and update if needed.
*/

/* ─────────────────────────────────────
   COLOR VARIABLES
   ───────────────────────────────────── */
:root {
  --559-orange:   #E6771D;
  --559-black:    #0a0a0a;
  --559-dark:     #111111;
  --559-gray-900: #1a1a1a;
  --559-gray-800: #222222;
  --559-gray-700: #2a2a2a;
  --559-gray-500: #555555;
  --559-gray-300: #999999;
  --559-white:    #ffffff;

  --col-classifieds: #22c55e;
  --col-realestate:  #ef4444;
  --col-directory:   #3b82f6;
  --col-automotive:  #f97316;
  --col-foggy:       #94a3b8;
  --col-menu:        #f43f5e;
}

/* ─────────────────────────────────────
   FRONT PAGE — BUST OUT OF PARENT WRAPPERS
   ─────────────────────────────────────
   BEGINNER NOTE:
   The parent theme wraps all page content in containers with
   padding, max-width, and a light background. These rules
   override that on the front page only by targeting the body
   class "home" that WordPress adds automatically.
   We're not touching the parent theme — just overriding on top.
*/
body.home {
  background: var(--559-dark) !important;
}

/* Hide the default header logo/nav area on front page only */
body.home .site-header,
body.home .site-branding,
body.home #masthead,
body.home .header-wrap,
body.home .site-logo {
  display: none !important;
}

/*
  BEGINNER NOTE on !important:
  Normally you want to avoid !important, but here we're intentionally
  overriding the parent theme's styles which may have higher specificity.
  It's acceptable when you need a guaranteed override in a child theme.
*/

/* Remove padding/max-width from the parent's content wrappers */
body.home #content,
body.home #primary,
body.home .site-content,
body.home .entry-content,
body.home .content-area {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

body.home #page,
body.home .site {
  background: var(--559-dark) !important;
}

/* ─────────────────────────────────────
   HERO
   ───────────────────────────────────── */
.fp-hero {
  background: var(--559-black);
  padding: 4rem 1.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fp-hero::before {
  content: '559';
  position: absolute;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 15rem;
  color: rgba(230,119,29,0.04);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  line-height: 1;
  z-index: 0;
}
.fp-hero-content {
  position: relative;
  z-index: 1;
  margin-top: -3rem;
  padding-bottom: 1rem;
}
.fp-hero-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--559-orange);
  margin-bottom: 0.75rem;
}
.fp-hero-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--559-white);
  margin-bottom: 1rem;
}
.fp-hero-title span { color: var(--559-orange); }
.fp-hero-sub {
  font-size: 0.95rem;
  color: var(--559-gray-300);
  max-width: 460px;
  margin: 0 auto 1.75rem;
  line-height: 1.65;
}
.fp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(230,119,29,0.1);
  border: 1px solid rgba(230,119,29,0.3);
  color: var(--559-orange);
  font-family: 'DM Mono', monospace;
  font-size: 0.67rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 2px;
}
.fp-hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--559-orange);
  border-radius: 50%;
  animation: fp-blink 2s infinite;
}
@keyframes fp-blink {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.35; transform:scale(0.75); }
}

/* ─────────────────────────────────────
   NAV TABS — inside hero bottom border
   ─────────────────────────────────────
   BEGINNER NOTE:
   We're pulling the WordPress nav menu (wp_nav_menu) into the bottom
   of our hero and styling it as tabs. The class .fp-nav-bar wraps it.
   WordPress outputs the menu as a <ul> so we convert it to flex tabs.
*/
.fp-nav-bar {
  background: var(--559-gray-900);
  border-top: 1px solid var(--559-gray-700);
  border-bottom: 0px solid var(--559-orange);
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 1;
}
.fp-nav-bar::-webkit-scrollbar { display: none; }

/* WordPress outputs nav as: div.fp-nav-bar > div.fp-nav-inner > ul > li > a */
.fp-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.fp-nav-bar ul {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fp-nav-bar ul li {
  flex-shrink: 0;
}
.fp-nav-bar ul li a,
.fp-nav-bar ul li span {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem 0.6rem;
  display: block;
  color: var(--559-gray-300);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: color 0.18s, border-color 0.18s;
}
.fp-nav-bar ul li a:hover {
  color: var(--559-orange);
  border-bottom-color: var(--559-orange);
}
.fp-nav-bar ul li.current-menu-item a,
.fp-nav-bar ul li.current_page_item a {
  color: var(--559-orange);
  border-bottom-color: var(--559-orange);
}
/* Disabled/coming soon items */
.fp-nav-bar ul li.menu-item-disabled a,
.fp-nav-bar ul li.menu-item-disabled span {
  color: var(--559-gray-500);
  cursor: not-allowed;
  pointer-events: none;
}

/* ─────────────────────────────────────
   GRID SECTION
   ───────────────────────────────────── */
.fp-network {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.fp-section-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--559-gray-500);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.fp-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--559-gray-700);
}
.fp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 2px;
  background: var(--559-gray-700);
  border: 2px solid var(--559-gray-700);
}

/* ─────────────────────────────────────
   CARDS
   ───────────────────────────────────── */
.fp-card {
  background: var(--559-gray-900);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: background 0.2s;
  display: flex;
  flex-direction: column;
  min-height: 210px;
}
.fp-card:hover { background: var(--559-gray-800); }
.fp-card-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.fp-card-corner {
  position: absolute; top: 0; right: 0;
  width: 70px; height: 70px;
  opacity: 0.07;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.fp-card-status {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}
.fp-sdot { width: 5px; height: 5px; border-radius: 50%; }
.fp-status-live { color: #22c55e; }
.fp-status-live .fp-sdot { background: #22c55e; }
.fp-status-soon { color: var(--559-gray-500); }
.fp-status-soon .fp-sdot { background: var(--559-gray-700); }
.fp-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 1.65rem;
  line-height: 1;
  color: var(--559-white);
  margin-bottom: 0.3rem;
}
.fp-card-domain {
  font-family: 'DM Mono', monospace;
  font-size: 0.64rem;
  color: var(--559-gray-500);
  margin-bottom: 0.8rem;
}
.fp-card-desc {
  font-size: 0.83rem;
  color: var(--559-gray-300);
  line-height: 1.55;
  flex: 1;
}
.fp-card-foot {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fp-card-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  border: 1px solid;
}
.fp-card-arrow {
  font-size: 1rem;
  color: var(--559-gray-500);
  transition: transform 0.2s, color 0.2s;
}
.fp-card:hover .fp-card-arrow { transform: translateX(4px); }

/* Per-property color tokens */
.fp-c-classifieds .fp-card-bar,
.fp-c-classifieds .fp-card-corner { background: var(--col-classifieds); }
.fp-c-classifieds .fp-card-tag { color: var(--col-classifieds); border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.06); }
.fp-c-classifieds:hover .fp-card-arrow { color: var(--col-classifieds); }

.fp-c-realestate .fp-card-bar,
.fp-c-realestate .fp-card-corner { background: var(--col-realestate); }
.fp-c-realestate .fp-card-tag { color: var(--col-realestate); border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.06); }
.fp-c-realestate:hover .fp-card-arrow { color: var(--col-realestate); }

.fp-c-directory .fp-card-bar,
.fp-c-directory .fp-card-corner { background: var(--col-directory); }
.fp-c-directory .fp-card-tag { color: var(--col-directory); border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.06); }
.fp-c-directory:hover .fp-card-arrow { color: var(--col-directory); }

.fp-c-automotive .fp-card-bar,
.fp-c-automotive .fp-card-corner { background: var(--col-automotive); }
.fp-c-automotive .fp-card-tag { color: var(--col-automotive); border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.06); }
.fp-c-automotive:hover .fp-card-arrow { color: var(--col-automotive); }

.fp-c-foggy .fp-card-bar,
.fp-c-foggy .fp-card-corner { background: var(--col-foggy); }
.fp-c-foggy .fp-card-tag { color: var(--col-foggy); border-color: rgba(148,163,184,.3); background: rgba(148,163,184,.06); }
.fp-c-foggy:hover .fp-card-arrow { color: var(--col-foggy); }

.fp-c-menu .fp-card-bar,
.fp-c-menu .fp-card-corner { background: var(--col-menu); }
.fp-c-menu .fp-card-tag { color: var(--col-menu); border-color: rgba(244,63,94,.3); background: rgba(244,63,94,.06); }
.fp-c-menu:hover .fp-card-arrow { color: var(--col-menu); }

/* ─────────────────────────────────────
   559 FOCUS FULL WIDTH CARD
   ───────────────────────────────────── */
.fp-focus {
  background: var(--559-black);
  border: 2px solid var(--559-gray-700);
  border-top: 3px solid var(--559-orange);
  margin-top: 2px;
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  transition: background 0.2s;
}
.fp-focus:hover { background: #0f0f0f; }
.fp-focus::after {
  content: 'FOCUS';
  position: absolute;
  right: 1.5rem; top: 50%;
  transform: translateY(-50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 7rem;
  color: rgba(230,119,29,0.04);
  pointer-events: none;
  line-height: 1;
}
.fp-focus-left { display: flex; align-items: center; gap: 1.25rem; }
.fp-focus-icon {
  width: 46px; height: 46px;
  background: rgba(230,119,29,0.1);
  border: 1px solid rgba(230,119,29,0.25);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 1rem;
  color: var(--559-orange); flex-shrink: 0;
}
.fp-focus-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  color: var(--559-orange);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.fp-focus-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: 1.4rem;
  color: var(--559-white); margin-bottom: 0.15rem;
}
.fp-focus-desc { font-size: 0.8rem; color: var(--559-gray-300); }
.fp-focus-domain {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem; color: var(--559-orange);
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(230,119,29,0.3);
  border-radius: 2px;
  background: rgba(230,119,29,0.05);
  flex-shrink: 0;
}

/*--------------------------------------------------------------
# Yard Sale Tab — Sign Style
--------------------------------------------------------------*/

/* Grass blades on yard sale tab */
.primary-nav__list > li.menu-item-yard-sale {
    position: relative;
}

.primary-nav__list > li.menu-item-yard-sale::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    transform: translateX(-50%);
    width: 140px;
    height: 18px;
    background-image: url('./assets/images/grass-blades.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    pointer-events: none;
    z-index: 1;
}

/* Target the yard sale tab specifically */
.primary-nav__list > li.menu-item-yard-sale > a {
    background-color: #111111;
    border: 4px solid #ffffff;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 0;
    min-width: 110px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    overflow: visible;
}

/* 559 corner ribbon */
.primary-nav__list > li.menu-item-yard-sale > a::before {
    content: '#559';
    position: absolute;
    top: -4px;
    left: -4px;
    background: var(--color-accent);
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--font-weight-black);
    letter-spacing: 0.05em;
    padding: 2px 4px;
    border-bottom-right-radius: 7px;
    border-top-left-radius: 0px;
    line-height: 1;
    z-index: 2;
}

/* Black sign area — YARD SALES text */
.primary-nav__list > li.menu-item-yard-sale > a .nav-tab__label {
    display: block;
    background: var(--yard-sale-black);
    color: var(--yard-sale-orange);
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-black);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-top: 8px;
    line-height: 1.1;
    text-shadow: 
        1px 1px 0 rgba(0,0,0,0.8),
        0 0 8px rgba(232, 118, 26, 0.3);
}

/* White rectangle strip at bottom — like the real sign */
.primary-nav__list > li.menu-item-yard-sale > a .nav-tab__domain {
    display: block;
    margin: 0 1em .5em;
    background: #ffffff;
    color: #111111;
    font-family: var(--font-handwritten);
    font-size: 9px;
    
    text-align: center;
    padding: 2px var(--spacing-sm);
    border-radius: 0 0 3px 3px;
    border: 3px solid #dddddd;
    border-top: none;
    letter-spacing: 0.09em;
    line-height: 1.5;
}

/* Hover state */
.primary-nav__list > li.menu-item-yard-sale > a:hover {
    background-color: #1a1a1a;
    border-color: var(--color-accent);
}

.primary-nav__list > li.menu-item-yard-sale > a:hover .nav-tab__label {
    color: #ffffff;
    text-shadow: 
        0 0 12px rgba(232, 118, 26, 0.8),
        0 0 24px rgba(232, 118, 26, 0.4);
}

/* Active state */
.primary-nav__list > li.menu-item-yard-sale.current-menu-item > a {
    border-color: var(--color-accent);
    border-bottom: 3px solid var(--color-accent);
}

/* Bottom border override — sign already has white strip */
.primary-nav__list > li.menu-item-yard-sale > a {
    border-bottom: none !important;
}
/* ─────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────── */
@media (max-width: 680px) {
  .fp-grid { grid-template-columns: 1fr; }
  .fp-focus { flex-direction: column; align-items: flex-start; }
  .fp-focus::after { display: none; }
}