/*
Theme Name: Southern Fishing News v2
Theme URI: https://southernfishingnews.com
Description: Modernized responsive theme for Southern Fishing News.
Author: Phillip Lovelace - pixelflips
Author URI: https://pixelflips.com
Version: 2.0
*/

@view-transition {
  navigation: auto;
}

/* === CUSTOM PROPERTIES === */
:root {
  --color-primary:      #9a000a;
  --color-primary-dark: #7a0008;
  --color-bg-outer:     #3a3838;
  --color-bg-content:   #f0efef;
  --color-bg-module:    #ffffff;
  --color-bg-footer:    #d9d6d6;
  --color-text:         #333333;
  --color-text-muted:   #777777;
  --color-border:       #dddddd;

  --radius-card:  6px;
  --radius-img:   4px;
  --radius-btn:   4px;
  --radius-input: 6px;

  --shadow-card:  0 1px 4px rgba(0,0,0,0.08);
  --shadow-hero:  0 4px 16px rgba(0,0,0,0.35);
  --shadow-nav:   0 3px 8px rgba(0,0,0,0.3);
  --shadow-btn:   0 1px 3px rgba(0,0,0,0.12);
  --shadow-wrap:  0 4px 16px rgba(0,0,0,0.25);

  --font-stack: system-ui, -apple-system, sans-serif;
  --max-width:  1200px;
  --gap:        20px;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-nav:  13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;

  /* Line heights */
  --lh-tight:   1.2;
  --lh-reading: 1.7;
  --lh-loose:   1.75;

  /* Letter spacing */
  --tracking-1: 1px;
  --tracking-2: 2px;

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--text-lg); }
body {
  font-family: var(--font-stack);
  font-size: var(--text-lg);
  line-height: var(--lh-loose);
  color: var(--color-text);
  background: var(--color-bg-outer);
  padding: 10px 0;
}
img { max-width: 100%; height: auto; display: block; vertical-align: middle; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--font-stack); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.3px; color: var(--color-primary); }
h1 { font-size: 30px; margin-bottom: var(--gap); }
h2 { font-size: 22px; margin-bottom: var(--space-3); }
h3 { font-size: 17px; margin-bottom: var(--space-2); }
p { margin-bottom: var(--space-3); }
b, strong { font-weight: 700; }
em { font-style: italic; }

/* === LAYOUT === */

/* Header */
.site-header {
  background: var(--color-bg-content);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--gap);
}
.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-header__logo img { border-radius: var(--radius-img); height: 75px; width: auto; }

/* Search form in content (no results page, etc.) */
.search-form {
  display: flex;
  align-items: center;
  background: var(--color-bg-content);
  border-radius: 20px;
  padding: 0 var(--space-1) 0 14px;
  border: 1px solid var(--color-border);
  max-width: 400px;
}
.search-form:focus-within { border-color: var(--color-primary); background: #fff; }
.search-field {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-stack);
  font-size: var(--text-base);
  color: var(--color-text);
  padding: 10px var(--space-1);
  flex: 1;
}
.search-field::placeholder { color: #999; }
.search-submit {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px var(--space-2);
  color: #999;
  font-size: var(--text-md);
  line-height: 1;
  display: flex;
  align-items: center;
}
.search-submit:hover { color: var(--color-primary); }

.site-header__search .search-form {
  display: flex;
  align-items: center;
  background: #e4e2e2;
  border-radius: 20px;
  padding: 0 var(--space-1) 0 14px;
  border: 1px solid #d0cece;
}
.site-header__search .search-field {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-stack);
  font-size: var(--text-base);
  color: var(--color-text);
  padding: var(--space-2) var(--space-1);
  width: 200px;
}
.site-header__search .search-field::placeholder { color: #999; }
.site-header__search .search-field::-webkit-search-decoration,
.site-header__search .search-field::-webkit-search-cancel-button { display: none; }
.site-header__search .search-submit {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px var(--space-2);
  color: #999;
  font-size: var(--text-md);
  line-height: 1;
  display: flex;
  align-items: center;
}
.site-header__search .search-submit:hover { color: var(--color-primary); }
.site-header__search .search-form:focus-within {
  border-color: var(--color-primary);
  background: #fff;
}

/* Hamburger button */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
}
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* Nav */
.main-nav {
  background: var(--color-primary);
  box-shadow: var(--shadow-nav);
}
.main-nav__list {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  padding: 0;
}
.main-nav__link {
  display: block;
  color: #fff;
  font-size: var(--text-nav);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-1);
  padding: 11px 14px;
  opacity: 0.85;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.main-nav__link:hover,
.main-nav__link.is-active {
  opacity: 1;
  border-bottom-color: #fff;
  text-decoration: none;
}
.main-nav__tagline {
  margin-left: auto;
  align-self: center;
  color: rgba(255,255,255,0.65);
  font-family: 'Kalam', cursive;
  font-size: var(--text-base);
  font-style: italic;
  pointer-events: none;
  white-space: nowrap;
}

/* Dark gap between nav and content */
.site-content {
  background: var(--color-bg-outer);
  padding: var(--space-4);
}

/* Content area: main + sidebar */
.content-area {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--color-bg-content);
  border-radius: var(--radius-card);
  padding: var(--gap);
  box-shadow: var(--shadow-wrap);
  display: flex;
  gap: var(--gap);
}
.main-content { flex: 2.1; min-width: 0; }
.aside { flex: 1; min-width: 0; }

/* Footer */
.site-footer {
  background: transparent;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--gap) var(--gap) 14px;
  text-align: center;
}
.footer-nav__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-bottom: var(--space-2);
}
.footer-nav__list a { font-size: var(--text-base); color: rgba(255,255,255,0.75); }
.footer-nav__list a:hover { color: #fff; }
.site-footer__copy { font-size: var(--text-sm); color: rgba(255,255,255,0.5); }
.site-footer__copy span { display: block; font-size: var(--text-xs); margin-top: var(--space-1); }
.site-byline { font-size: var(--text-xs); text-align: center; max-width: var(--max-width); margin: 6px auto 0; padding: 0 var(--space-1); color: rgba(255,255,255,0.35); }
.site-byline a { color: var(--color-text-muted); }

/* === COMPONENTS === */

/* Breadcrumb */
.breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb__sep { margin: 0 5px; }

/* Section label */
.section-label {
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-2);
  color: var(--color-primary);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: var(--space-4);
}

/* Button */
.btn {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-1);
  padding: 6px 14px;
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-btn);
  text-decoration: none;
  margin-top: var(--space-2);
  border: none;
  cursor: pointer;
}
.btn:hover { background: var(--color-primary-dark); text-decoration: none; color: #fff; }

/* Hero — full-width featured story above two-column layout */
.hero-section {
  max-width: var(--max-width);
  margin: 0 auto var(--gap);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-hero);
}
.hero {
  position: relative;
  min-height: 380px;
  background: #1a1a1a no-repeat center / cover;
  display: flex;
  align-items: center;
}
.hero--has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #1a1a1a 35%, rgba(26,26,26,0.9) 48%, rgba(26,26,26,0.4) 65%, rgba(26,26,26,0.1) 85%, transparent 100%);
}
.hero__body {
  position: relative;
  z-index: 1;
  padding: 32px 36px;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
}
.hero__category {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-1);
  padding: 2px var(--space-2);
  border-radius: 2px;
  margin-bottom: var(--space-3);
}
.hero__title { margin-bottom: var(--space-2); }
.hero__title a { color: #fff; font-size: 28px; line-height: var(--lh-tight); }
.hero__title a:hover { text-decoration: underline; }
.hero__meta { font-size: var(--text-nav); color: #bbb; margin-bottom: var(--space-3); }
.hero__excerpt { font-size: var(--text-md); color: #ccc; line-height: var(--lh-reading); margin-bottom: var(--space-4); }

/* Centered module (image-only sidebar modules) */
.module--centered { text-align: center; }
.module--centered img { margin: 0 auto var(--space-2); }
.module--centered a { display: block; }

/* Post list */
.post-list { display: flex; flex-direction: column; gap: var(--space-2); }

/* Post card */
.post-card {
  display: flex;
  gap: var(--gap);
  align-items: flex-start;
  background: var(--color-bg-module);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.post-card__thumb { flex-shrink: 0; background: #fff; padding: 6px 6px 20px; box-shadow: 0 3px 8px rgba(0,0,0,0.18); transform: rotate(-1.5deg); transition: transform 0.2s ease; }
.post-card__thumb:hover { transform: rotate(0deg); }
.post-card:nth-child(even) .post-card__thumb { transform: rotate(1.5deg); }
.post-card:nth-child(even) .post-card__thumb:hover { transform: rotate(0deg); }
.post-card__thumb img { width: 120px; height: 96px; object-fit: cover; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); outline: 1px solid rgba(0,0,0,0.1); }
.post-card__title { font-size: var(--text-lg); margin-bottom: 6px; }
.post-card__title a { color: var(--color-primary); }
.post-card__meta { font-size: var(--text-nav); color: var(--color-text-muted); margin-bottom: 6px; }
.post-card__excerpt { font-size: var(--text-base); color: var(--color-text); line-height: var(--lh-reading); }

/* Post nav */
.post-nav { text-align: right; padding-top: var(--space-3); }
.post-nav a { font-size: var(--text-base); font-weight: 700; color: var(--color-primary); }

/* Stretch article module to full height on single posts */
.single .main-content { display: flex; flex-direction: column; }
.single .main-content .module { flex: 1; }

/* Sidebar module */
.module {
  background: var(--color-bg-module);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-card);
}
.lg-caps {
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-2);
  color: var(--color-primary);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary);
  margin-bottom: var(--space-3);
}

/* Social icons */
.social-web {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: var(--space-1) 0;
}
.social-web a { opacity: 0.85; }
.social-web a:hover { opacity: 1; }
.bi { width: 26px; height: 26px; }
.bi-facebook   { color: #3b5997; }
.bi-instagram  { color: #d62976; }
.bi-threads-fill { color: #101010; }
.bi-twitter-x  { color: #333; }
.bi-linkedin   { color: #0073b1; }
.bi-pinterest  { color: #e60023; }
.bi-rss-fill   { color: #f60; }

/* About module */
.about-module p { font-size: var(--text-md); line-height: var(--lh-reading); margin-bottom: var(--space-3); }

/* Sponsors */
.sponsor-manager {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  justify-items: center;
}
.sponsor-manager-item { text-align: center; }
.sponsor-manager-item img { max-width: 100%; height: auto; border-radius: var(--radius-img); }
.sponsor-manager-item a { display: block; text-decoration: none; }
.sponsor-manager > .sponsor-manager-item:last-child:nth-child(odd) {
  grid-column: span 2;
  justify-self: center;
}

/* Single post */
.news-post { word-wrap: break-word; }
.news-post h1 { margin-bottom: 0; }
.news-post img { max-width: 100%; height: auto; border-radius: var(--radius-img); }
.postmetadata { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.entry img { margin-bottom: var(--space-3); }

/* Share links */
.share-links { margin: var(--space-3) 0 0; padding-bottom: var(--space-4); }
.share-links h3 { margin-bottom: var(--space-2); }
.share-links a {
  display: inline-block;
  border-radius: var(--radius-btn);
  padding: 5px var(--space-3);
  margin: var(--space-1) var(--space-1) 0 0;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.share-links a:hover { opacity: 0.85; text-decoration: none; }
.share-links .facebook { background: #3b5997; }
.share-links .linkedin { background: #0073b1; }
.share-links .threads  { background: #101010; border: 1px solid #333; }
.share-links .bsky     { background: #1085ff; }

/* Comments */
#comments-block { margin-top: 28px; border-top: 2px solid var(--color-border); padding-top: var(--gap); }
#comments-block h2 { font-size: 18px; margin-bottom: var(--space-3); }
.commentlist { list-style: none; padding: 0; margin: 0 0 var(--gap); display: flex; flex-direction: column; gap: var(--space-3); }
.commentlist li { background: var(--color-bg-module); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); }
.commentlist li.alt { background: #f9f9f9; }
.commentlist cite { font-weight: 700; font-style: normal; }
.commentlist .commentmetadata { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
#comments-block2 { margin-top: 24px; }
#comments-block2 h2 { font-size: 18px; margin-bottom: var(--space-4); }
#commentform p { margin-bottom: var(--space-3); }
#commentform label { display: block; font-size: var(--text-nav); font-weight: 600; margin-bottom: var(--space-1); color: var(--color-text); }
#commentform input[type="text"],
#commentform textarea {
  width: 100%;
  padding: var(--space-2) 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-size: var(--text-base);
  font-family: inherit;
  background: #fff;
  color: var(--color-text);
  box-sizing: border-box;
}
#commentform input[type="text"]:focus,
#commentform textarea:focus { outline: none; border-color: var(--color-primary); }
#commentform textarea { min-height: 110px; resize: vertical; }

/* Article prev/next navigation (single posts) */
.post-nav-articles {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0 var(--space-1);
  gap: var(--space-3);
}
.post-nav-articles p { margin: 0; }
.post-nav-articles a {
  font-size: var(--text-nav);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.post-nav-articles a:hover { text-decoration: underline; }
.post-nav-articles__next { text-align: right; }

/* Blog nav (pagination) */
.blog-nav { display: flex; justify-content: space-between; padding-top: var(--space-3); }
.blog-nav a {
  background: #e9e9e9;
  border: 1px solid #cecece;
  border-radius: var(--radius-btn);
  padding: 5px 10px;
  font-size: var(--text-sm);
  color: var(--color-text);
  box-shadow: var(--shadow-btn);
}
.blog-nav a:hover { background: #ddd; text-decoration: none; }

/* Clearfix — contains floated children */
.clearfix::after { content: ''; display: table; clear: both; }

/* Visually hidden but accessible to screen readers */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bulleted list — used on 404 and content pages */
.list-disc { list-style: disc; padding-left: var(--space-4); margin-bottom: var(--space-3); }
.list-disc li { margin-bottom: 4px; }

/* Alignment helpers */
.alignleft  { float: left; margin: 0 var(--space-4) var(--space-2) 0; border-radius: var(--radius-img); }
.alignright { float: right; margin: 0 0 var(--space-2) var(--space-4); border-radius: var(--radius-img); }
.aligncenter { display: block; margin: 0 auto var(--space-2); border-radius: var(--radius-img); }

/* WordPress caption */
.wp-caption { margin-bottom: var(--space-3); text-align: center; width: auto !important; max-width: 100% !important; }
.wp-caption img { border-radius: var(--radius-img); }
.wp-caption-text { font-size: var(--text-xs); line-height: var(--lh-reading); color: var(--color-text-muted); }

/* Gutenberg gallery block inside .module */
.module .wp-block-gallery {
  margin: 0;
}
.module .wp-block-gallery .wp-block-image img {
  border-radius: var(--radius-img);
}
.module .wp-block-gallery figcaption {
  font-size: var(--text-sm);
  line-height: var(--lh-reading);
}

/* Search form */
.blog-search form { display: flex; }
.blog-search #s {
  background: #d8d8d8;
  border: none;
  border-radius: var(--radius-input);
  padding: 6px var(--space-3);
  font-size: var(--text-nav);
  width: 100%;
}
.blog-search #searchsubmit { display: none; }

/* Regular post listing (news-stories / all-posts) */
.reg-post {
  display: flex;
  gap: var(--gap);
  background: var(--color-bg-module);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-card);
}
.reg-post .post-thumb { flex-shrink: 0; align-self: flex-start; background: #fff; padding: 6px 6px 20px; box-shadow: 0 3px 8px rgba(0,0,0,0.18); transform: rotate(-1.5deg); }
.reg-post:nth-child(even) .post-thumb { transform: rotate(1.5deg); }
.reg-post .post-thumb img { width: 120px; height: 96px; object-fit: cover; outline: 1px solid rgba(0,0,0,0.1); }
.reg-post .post-snippet { flex: 1; }
.reg-post .post-snippet h2 { font-size: var(--text-lg); margin-bottom: 6px; }
.reg-post .post-snippet h2 a { color: var(--color-primary); }

/* === RESPONSIVE EMBEDS & MEDIA === */

/* Prevent iframes from overflowing their container */
iframe { max-width: 100%; }

/* Classic editor video wrapper — JS in main.js handles proportional resize */
.wp-video { width: 100% !important; max-width: 100% !important; }

/* Gutenberg embed blocks — aspect-ratio letterbox */
.wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Images inside post content: override any inline width/height WordPress adds */
.entry img,
.post-card__excerpt img,
.news-post img { max-width: 100% !important; height: auto !important; }

/* === RESPONSIVE === */

@media (max-width: 1100px) {
  .main-nav__tagline { display: none; }
}

@media (max-width: 980px) {
  .site-footer,
  .site-byline { max-width: 100%; border-radius: 0; }
  .main-nav__list { padding: 0 var(--space-3); }
  .main-nav__link { padding: 10px var(--space-2); font-size: var(--text-xs); }
  .site-header { padding: 10px var(--space-3); }
  .site-content { padding: var(--space-3); }
  .content-area { padding: var(--space-3); }
}

@media (max-width: 768px) {
  /* Show hamburger, hide nav by default */
  .nav-toggle { display: flex; }
  .main-nav { display: none; }
  .main-nav.is-open { display: block; }
  .main-nav__list { flex-direction: column; padding: var(--space-2) 0; }
  .main-nav__link {
    padding: 10px var(--space-4);
    border-bottom: 1px solid var(--color-primary-dark);
  }
  .main-nav__link.is-active { border-bottom: 1px solid var(--color-primary-dark); }

  /* Stack sidebar below main */
  .content-area { flex-direction: column; }
  .aside { flex: none; }

  /* Hero */
  .hero { min-height: 220px; }
  .hero__body { padding: var(--space-4) 18px; max-width: 100%; }
  .hero__title a { font-size: var(--gap); }

  /* Post card: thumbnail smaller */
  .post-card__thumb img { width: 90px; height: 70px; }
  .reg-post .post-thumb img { width: 70px; height: 60px; }

  /* Footer nav wraps */
  .footer-nav__list { gap: var(--space-1) var(--space-2); }

  /* Hide search in header — keep it in page body */
  .site-header__search { display: none; }

  /* Visually hide breadcrumbs but keep accessible to screen readers */
  .breadcrumb { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  /* Hide last two sidebar modules on small screens */
  .module--awards, .hooah-module { display: none; }

  /* Float images block on small screens to prevent overflow */
  .alignleft,
  .alignright {
    float: none;
    display: block;
    margin: 0 auto var(--space-3);
  }
}