/* ========================================
   PRIVACY.CSS - Privacy Policy Page Styling
   Source Grid Agricultural Platform
   ======================================== */

/* CSS Variables */
:root {
  --olive-green: #636B2F;
  --olive-green-hover: #7a8439;
  --olive-green-light: rgba(99, 107, 47, 0.1);
  --white: #FFFFFF;
  --black: #000000;
  --text-secondary: #333333;
  --grey: #808080;
  --grey-light: #f5f5f5;
  --shadow: rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

/* ========================================
   PRIVACY PAGE CONTENT - SCOPED STYLES
   ======================================== */

#privacy-page-content {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--white);
  padding: 3rem 1rem;
  min-height: calc(100vh - 300px);
  color: var(--black);
  line-height: 1.6;
}

/* Privacy Container */
#privacy-page-content .privacy-container {
  max-width: 1000px;
  margin: 0 auto;
  background-color: var(--white);
  border-radius: 15px;
  padding: 2rem;
}

/* Privacy Header */
#privacy-page-content .privacy-header {
  text-align: center;
  padding: 2rem 0;
  border-bottom: 3px solid var(--olive-green);
  margin-bottom: 3rem;
}

#privacy-page-content .privacy-header h1 {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--olive-green);
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
}

#privacy-page-content .privacy-header .meta {
  font-size: 0.95rem;
  color: var(--grey);
  font-style: italic;
  margin: 0;
}

/* Privacy Content Area */
#privacy-page-content .privacy-content {
  padding: 0 1rem;
}

#privacy-page-content .privacy-content .intro-text {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 3rem;
  text-align: center;
  padding: 1.5rem;
  background-color: var(--olive-green-light);
  border-radius: 10px;
}

/* Privacy Sections */
#privacy-page-content .privacy-section {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--grey-light);
}

#privacy-page-content .privacy-section:last-child {
  border-bottom: none;
}

#privacy-page-content .privacy-section h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--olive-green);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--olive-green-light);
}

#privacy-page-content .privacy-section h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--olive-green);
  margin: 2rem 0 1rem;
}

#privacy-page-content .privacy-section p {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  text-align: justify;
}

/* Lists */
#privacy-page-content .privacy-section ul,
#privacy-page-content .privacy-section ol {
  margin: 1.5rem 0 1.5rem 1.5rem;
  padding: 0;
}

#privacy-page-content .privacy-section li {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.7;
  padding-left: 0.5rem;
}

#privacy-page-content .privacy-section li strong {
  color: var(--olive-green);
  font-weight: 600;
}

/* Numbered legal clauses
   ----------------------------------------------------------------------------
   Every <ol> in privacy.blade.php and terms.blade.php carries this class plus
   its own section number, so each clause gets a unique, citable number:

       <ol class="legal-list" style="--legal-section: '8.3';">

   renders 8.3.1, 8.3.2, 8.3.3 ...

   A plain <ol> restarts at 1 in every subsection, which is how the two
   documents ended up with a cross-reference pointing at the wrong section.

   ⚠️ QUOTE the section number. `--legal-section: 8.3` (unquoted) is not a
   valid <string>, which invalidates the whole content property and silently
   blanks EVERY clause number on the page. There is no error, it just goes
   blank. Always write it as '8.3'.

   The separator is added here, not in the markup, so the blade files only ever
   carry the section number itself. An <ol> that omits --legal-section falls
   back to '' and renders '.1', '.2' — wrong, but visibly wrong, rather than
   silently blank. */
#privacy-page-content .privacy-section ol.legal-list {
  list-style: none;
  counter-reset: legal-clause;
  margin-left: 0;
}

#privacy-page-content .privacy-section ol.legal-list > li {
  counter-increment: legal-clause;
  position: relative;
  padding-left: 3.75rem;
}

#privacy-page-content .privacy-section ol.legal-list > li::before {
  content: var(--legal-section, '') '.' counter(legal-clause);
  position: absolute;
  left: 0;
  top: 0;
  width: 3.25rem;
  color: var(--olive-green);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#privacy-page-content .privacy-section strong {
  color: var(--black);
  font-weight: 600;
}

/* Contact Info Section */
#privacy-page-content .contact-info {
  background-color: var(--grey-light);
  padding: 2rem;
  border-radius: 15px;
  margin-top: 2rem;
}

#privacy-page-content .contact-info strong {
  color: var(--olive-green);
  font-size: 1.2rem;
  display: block;
  margin-bottom: 1rem;
}

#privacy-page-content .contact-info p {
  margin-bottom: 0.5rem;
  text-align: left;
  font-size: 1rem;
}

#privacy-page-content .contact-info a {
  color: var(--olive-green);
  font-weight: 600;
  text-decoration: underline;
  transition: var(--transition);
}

#privacy-page-content .contact-info a:hover {
  color: var(--olive-green-hover);
  text-decoration: none;
}

/* Highlight Boxes */
#privacy-page-content .privacy-highlight {
  background-color: var(--olive-green-light);
  padding: 1.5rem;
  border-radius: 10px;
  margin: 2rem 0;
}

#privacy-page-content .privacy-highlight p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Tablet Devices */
@media (max-width: 992px) {
  #privacy-page-content {
    padding: 2rem 1rem;
  }

  #privacy-page-content .privacy-container {
    padding: 1.5rem;
  }

  #privacy-page-content .privacy-header h1 {
    font-size: 2.3rem;
  }

  #privacy-page-content .privacy-section h2 {
    font-size: 1.75rem;
  }

  #privacy-page-content .privacy-section h3 {
    font-size: 1.35rem;
  }
}

/* Mobile Devices */
@media (max-width: 768px) {
  #privacy-page-content {
    padding: 1.5rem 0.5rem;
  }

  #privacy-page-content .privacy-container {
    padding: 1rem;
    border-radius: 10px;
  }

  #privacy-page-content .privacy-header {
    padding: 1.5rem 0;
    margin-bottom: 2rem;
  }

  #privacy-page-content .privacy-header h1 {
    font-size: 1.9rem;
  }

  #privacy-page-content .privacy-header .meta {
    font-size: 0.85rem;
  }

  #privacy-page-content .privacy-content {
    padding: 0 0.5rem;
  }

  #privacy-page-content .privacy-content .intro-text {
    font-size: 1rem;
    padding: 1rem;
  }

  #privacy-page-content .privacy-section {
    margin-bottom: 2rem;
  }

  #privacy-page-content .privacy-section h2 {
    font-size: 1.5rem;
  }

  #privacy-page-content .privacy-section h3 {
    font-size: 1.2rem;
  }

  #privacy-page-content .privacy-section p,
  #privacy-page-content .privacy-section li {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  #privacy-page-content .privacy-section ul,
  #privacy-page-content .privacy-section ol {
    margin-left: 1rem;
  }

  /* Clause numbers sit in the list item's own padding, so .legal-list keeps
     margin-left: 0 and tightens the gutter instead. */
  #privacy-page-content .privacy-section ol.legal-list > li {
    padding-left: 3rem;
  }

  #privacy-page-content .privacy-section ol.legal-list > li::before {
    width: 2.5rem;
  }

  #privacy-page-content .contact-info {
    padding: 1.5rem;
  }

  #privacy-page-content .contact-info strong {
    font-size: 1.1rem;
  }

  #privacy-page-content .privacy-highlight {
    padding: 1rem;
  }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
  #privacy-page-content .privacy-header h1 {
    font-size: 1.6rem;
  }

  #privacy-page-content .privacy-section h2 {
    font-size: 1.3rem;
  }

  #privacy-page-content .privacy-section h3 {
    font-size: 1.1rem;
  }

  #privacy-page-content .privacy-section p,
  #privacy-page-content .privacy-section li {
    font-size: 0.9rem;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  #privacy-page-content {
    background-color: var(--white);
    padding: 0;
  }

  #privacy-page-content .privacy-header {
    border-bottom: 2px solid var(--black);
  }

  #privacy-page-content .privacy-section {
    page-break-inside: avoid;
  }

  #privacy-page-content .contact-info {
    border: 1px solid var(--grey);
  }
}

/* ========================================================================
   EDITORIAL THEME ALIGNMENT
   Aligns the privacy page typography with the site-wide editorial design.
   Loaded after theme.css so the --tg-* tokens are available.
   ======================================================================== */
.privacy-header h1 {
  font-family: var(--tg-font-display, "Aboreto", Georgia, serif);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.privacy-section h2 {
  font-family: var(--tg-font-display, "Aboreto", Georgia, serif);
  font-weight: 400;
  letter-spacing: 0.01em;
}