/* ======================================================   AGRICULTURAL LOANS PAGE STYLESHEET   ------------------------------------------------------   Purpose:   Page-specific styling for loans_agricultural.html   What this file controls:   - Main content width and centering   - Two-column desktop layout   - Page header/title styling   - Loan card presentation   - Feature image sizing   - Lincoln Letter newsletter card   - Archive section layout   - Mobile stacking and overflow prevention   Mobile issue addressed:   This file now includes:   1. Horizontal overflow protection   2. Safer sizing for grid/flex children   3. Optional improvement applied:      newsletter items stack vertically on mobile      instead of forcing sideways scrolling   ====================================================== *//* ======================================================   GLOBAL PAGE SAFETY / OVERFLOW PROTECTION   ------------------------------------------------------   Prevents the page from becoming wider than the phone   viewport and causing left/right scrolling.   Note:   overflow-x: hidden is intentional here because the   original horizontal newsletter scroller could push the   layout wider than the screen on mobile.   ====================================================== */body {  overflow-x: clip;}/* ======================================================   PAGE CONTENT WRAPPER   ------------------------------------------------------   Constrains this page’s content to a wider desktop width   than the shared site stylesheet, while keeping it centered.   box-sizing ensures padding is included in width math.   min-width: 0 helps prevent grid children from forcing   overflow in responsive layouts.   ====================================================== */.content-section {  max-width: 1280px;  margin: 0 auto;  padding: 0 20px;  box-sizing: border-box;  min-width: 0;}/* ======================================================   MAIN TWO-COLUMN PAGE LAYOUT   ------------------------------------------------------   Desktop:   - left column = loan cards   - right column = image + newsletter card   minmax(0, 1fr) is important:   It allows columns to actually shrink instead of letting   their content force horizontal overflow.   ====================================================== */.two-col {  display: grid;  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  gap: 40px;  align-items: start;  margin-top: 120px;}/* ======================================================   GRID CHILD SAFETY   ------------------------------------------------------   These help prevent inner content from expanding beyond   the available column width.   ====================================================== */.left-col,.right-col,.page-header {  min-width: 0;}/* ======================================================   FULL-WIDTH HEADER ACROSS BOTH COLUMNS   ------------------------------------------------------   The page title/introduction spans the full grid width   above the two-column content.   ====================================================== */.page-header {  grid-column: 1 / -1;  margin-bottom: 6px;}/* ======================================================   MAIN PAGE TITLE   ------------------------------------------------------   Slightly reduced from a larger original value so the   heading feels balanced and wraps more cleanly.   ====================================================== */.page-title {  font-size: 3rem;  line-height: 1.05;  margin-bottom: 0.4rem;}/* ======================================================   INTRO TEXT   ------------------------------------------------------   Main introductory paragraph under the page title.   ====================================================== */.intro {  margin-bottom: 0;}/* ======================================================   OPTIONAL SUB-INTRO TEXT   ------------------------------------------------------   Present for consistency with other subpages if needed.   ====================================================== */.intro-sub {  font-family: Arial, Helvetica, sans-serif;  font-size: 1.1rem;  line-height: 1.5;  margin-bottom: 1rem;}/* ======================================================   SECTION HEADINGS   ------------------------------------------------------   Used if additional content sections are added later.   ====================================================== */.section-heading {  font-family: 'Playfair Display', Georgia, "Times New Roman", serif;  font-size: 1.6rem;  font-weight: 700;  margin-top: 2rem;  margin-bottom: 0.5rem;}/* ======================================================   FEATURE IMAGE   ------------------------------------------------------   Banner image in right column.   max-width: 100% keeps it contained to the column.   display: block removes inline-image whitespace behavior.   ====================================================== */.feature-image {  display: block;  width: 100%;  max-width: 100%;  height: auto;  margin: 1rem 0 24px;  border-radius: 12px;}/* ======================================================   ACCOUNT TABLE   ------------------------------------------------------   Kept here in case this page or future versions use the   same table style as other product pages.   ====================================================== */.account-table {  width: 100%;  border-collapse: collapse;  font-family: Arial, Helvetica, sans-serif;  font-size: 0.95rem;  line-height: 1.4;}.account-table th {  font-family: Georgia, "Times New Roman", serif;  background-color: #002855;  color: white;  text-align: left;  padding: 10px;  font-size: 1rem;  font-weight: 700;}.account-table td {  border: 1px solid #ddd;  padding: 10px;}.account-table tr:nth-child(even) {  background-color: #f9f9f9;}/* ======================================================   LOAN CARD   ------------------------------------------------------   Primary white content cards used throughout the page.   ====================================================== */.loan-card {  background: #fff;  border: 1px solid #d9d9d9;  border-radius: 10px;  padding: 24px;  margin-bottom: 24px;  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);  box-sizing: border-box;  max-width: 100%;}.loan-card h3 {  margin-top: 0;  margin-bottom: 12px;  color: #0a3a67;  font-size: 1.25rem;}.loan-card p,.loan-card ul {  font-size: 0.95rem;  line-height: 1.5;  margin: 0 0 12px;}/* ======================================================   FOOTNOTES   ------------------------------------------------------   Small disclosure / support text if used on the page.   ====================================================== */.footnotes {  font-family: Arial, Helvetica, sans-serif;  font-size: 0.85rem;  font-style: italic;  margin-top: 1.5rem;  line-height: 1.4;}/* ======================================================   NEWSLETTER CARD   ------------------------------------------------------   Special styling for the Lincoln Letter section.   ====================================================== */.newsletter-card {  padding: 28px;  border-radius: 12px;}.newsletter-card h3 {  margin-bottom: 6px;}.newsletter-sub {  margin: 0 0 14px;  font-size: 0.95rem;  line-height: 1.4;  color: #333;}/* ======================================================   NEWSLETTER SCROLLER - DESKTOP/TABLET   ------------------------------------------------------   Desktop keeps a horizontal scrolling card strip.   This is fine on larger screens.   Mobile behavior is overridden later to stack items   vertically as an optional UX improvement.   ====================================================== */.newsletter-scroller {  display: flex;  gap: 12px;  overflow-x: auto;  padding: 4px 2px 10px;  scroll-snap-type: x mandatory;  -webkit-overflow-scrolling: touch;  max-width: 100%;  box-sizing: border-box;}/* ======================================================   INDIVIDUAL NEWSLETTER ITEM   ------------------------------------------------------   Desktop item card inside the scroller.   flex: 0 0 auto keeps each card at natural width in the   horizontal layout.   ====================================================== */.newsletter-item {  flex: 0 0 auto;  border: 1px solid #e2e2e2;  border-radius: 12px;  padding: 16px;  background: #ffffff;  scroll-snap-align: start;  box-sizing: border-box;  max-width: 100%;}/* ======================================================   NEWSLETTER ITEM HEADER / TAG   ------------------------------------------------------   Month + tag row within each item.   ====================================================== */.newsletter-meta {  display: flex;  align-items: baseline;  justify-content: space-between;  gap: 10px;  margin-bottom: 12px;}.newsletter-month {  font-weight: 700;  color: #0a3a67;}.newsletter-tag {  font-size: 0.8rem;  padding: 3px 8px;  border-radius: 999px;  background: #002855;  color: #fff;  white-space: nowrap;}/* ======================================================   BUTTONS   ------------------------------------------------------   Page-scoped LNB button treatment used for PDF links.   ====================================================== */.lnb-btn {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 6px;  padding: 8px 12px;  border-radius: 8px;  font-size: 0.88rem;  font-weight: 700;  font-family: Arial, Helvetica, sans-serif;  text-decoration: none;  border: 1px solid #002855;  background: #002855;  color: #fff;  width: auto;  max-width: 100%;  box-sizing: border-box;}.lnb-btn.secondary {  background: #fff;  color: #002855;}.newsletter-actions {  display: flex;  flex-direction: column;  gap: 8px;}/* ======================================================   NEWSLETTER ARCHIVE   ------------------------------------------------------   Collapsible archive area for older issues.   ====================================================== */.newsletter-archive {  margin-top: 14px;  border-top: 1px solid #e6e6e6;  padding-top: 10px;}.newsletter-archive summary {  list-style: none;  cursor: pointer;  font-weight: 700;  color: #0a3a67;  display: flex;  align-items: center;  justify-content: space-between;  padding: 10px 0;}.newsletter-archive summary::-webkit-details-marker {  display: none;}.archive-chev {  transition: transform 0.18s ease;  font-size: 0.95rem;  color: #0a3a67;}.newsletter-archive[open] .archive-chev {  transform: rotate(180deg);}.newsletter-archive-body {  padding: 6px 0 2px;}/* ======================================================   ARCHIVE GRID   ------------------------------------------------------   Two-column year layout on larger screens.   ====================================================== */.archive-grid {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 18px;  margin-top: 8px;}.archive-year {  margin: 0 0 8px;  font-size: 0.95rem;  color: #002855;}.archive-list {  margin: 0;  padding-left: 18px;}.archive-list li {  margin: 6px 0;}.archive-list a {  color: #0a3a67;  text-decoration: none;  font-weight: 600;}.archive-list a:hover {  text-decoration: underline;}/* ======================================================   TABLET + MOBILE LAYOUT   ------------------------------------------------------   Main breakpoint for stacking page columns.   ====================================================== */@media (max-width: 900px) {  /* Stack the main page into one column */  .two-col {    grid-template-columns: 1fr;    gap: 24px;    margin-top: 80px;  }  /* Slightly tighter page side padding */  .content-section {    padding: 0 15px;  }  /* Make the page title fit phones more comfortably */  .page-title {    font-size: 2.2rem;    line-height: 1.1;  }  /* Archive switches to one column */  .archive-grid {    grid-template-columns: 1fr;  }  /* --------------------------------------------------     OPTIONAL IMPROVEMENT APPLIED:     Turn the newsletter strip into a vertical stack     on mobile instead of a horizontal scroller.     This gives a more natural phone experience and     avoids cards contributing to sideways page scroll.     -------------------------------------------------- */  .newsletter-scroller {    flex-direction: column;    overflow-x: visible;    overflow-y: visible;    scroll-snap-type: none;    gap: 12px;    padding: 4px 0 10px;  }  .newsletter-item {    flex: 1 1 auto;    width: 100%;    min-width: 0;    max-width: 100%;  }  .lnb-btn {    width: 100%;  }}/* ======================================================   SMALLER PHONE REFINEMENTS   ------------------------------------------------------   Additional tightening for narrow screens.   ====================================================== */@media (max-width: 640px) {  .content-section {    padding: 0 12px;  }  .loan-card {    padding: 20px;  }  .newsletter-card {    padding: 22px;  }  .page-title {    font-size: 2rem;  }}