/*
Theme Name:  Horology Republic
Description: Custom child theme for horologyrepublic.com — 1980s advertising aesthetic, EB Garamond, navy + gold + cream.
Author:      Horology Republic
Template:    business-event-pro
Version:     1.0
*/

/* ============================================================
   HOW THIS FILE WORKS
   ─────────────────────────────────────────────────────────
   This is a WordPress "child theme." It sits on top of the
   parent theme (business-event-pro) and overrides its styles.
   Anything you write here wins over the parent.

   TO CHANGE A COLOUR: edit the values in section 1 (:root).
   One change there updates the whole site automatically.

   TO CHANGE A FONT SIZE: find the heading (h1, h2, etc.)
   section below and edit the clamp() values.
     clamp(MIN, PREFERRED, MAX)
     e.g. clamp(2rem, 4vw, 3.5rem)
   ============================================================ */


/* ============================================================
   1. COLOUR PALETTE
   Edit these hex codes to repaint the whole site.
   ============================================================ */
:root {
  --hr-navy:  #1b2a3b;   /* deep 1980s navy — used for headers, footer, buttons  */
  --hr-cream: #f5f0e8;   /* warm off-white — body background and light text       */
  --hr-gold:  #b8960c;   /* antique gold — accent lines, hover states, prices     */
  --hr-black: #111111;   /* near-black — main body copy                           */
  --hr-white: #ffffff;   /* pure white — card and content section backgrounds     */
}


/* ============================================================
   2. GOOGLE FONT IMPORT — EB Garamond
   This loads the Garamond-style font from Google's free CDN.
   Weights loaded: 400 (regular), 500, 600, 700, 800 (bold),
                   plus italic versions of 400 and 500.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');


/* ============================================================
   3. GLOBAL RESET & BASE STYLES
   Sets the default font, spacing, and colours for everything.
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box; /* makes width/padding math easier */
}

body {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 18px;
  line-height: 1.75;
  color: var(--hr-black);
  background-color: var(--hr-cream) !important;
  background-image: none !important;
}

/* Remove the parent theme's body background image */
body,
.primary_header_2_wrapper {
  background-image: none !important;
}


/* ============================================================
   4. TYPOGRAPHY — Headings
   All caps + tracked letter-spacing = 1980s editorial print.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.entry-title,
.section-title h2,
.section-title h3,
.elementor-heading-title,
.widget-title {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-weight: 700;
  letter-spacing: 0.04em;    /* spreads letters apart — classic ad agency look */
  text-transform: uppercase;
  color: var(--hr-navy);
  line-height: 1.2;
}

/* H1 scales fluidly: minimum 2.4rem, ideal 5% of viewport, maximum 4rem */
h1,
.elementor-heading-title.elementor-size-xxl {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

h2,
.section-title h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}

h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }


/* ============================================================
   5. LINKS
   Navy by default, gold on hover.
   ============================================================ */
a {
  color: var(--hr-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--hr-gold);
  text-decoration: underline;
}


/* ============================================================
   6. TOP BAR (the thin strip above the main navigation)
   Replaces the blue-to-pink gradient with solid deep navy.
   ============================================================ */
#top-bar,
body:not(.page-template-page-fullwidth-transparent-header)
  header#masthead #top-bar {
  background: var(--hr-navy) !important;
  background-image: none !important;
  filter: none !important;        /* kills the IE gradient filter */
}

#top-bar,
#top-bar a,
#top-bar span,
#top-bar i {
  color: var(--hr-cream) !important;
}


/* ============================================================
   7. MAIN NAVIGATION BAR
   White background, navy border-bottom, Garamond nav links.
   ============================================================ */
.navbar-default,
.navbar.sticky,
header#masthead {
  background: var(--hr-white) !important;
  background-image: none !important;
  filter: none !important;
  border-bottom: 2px solid var(--hr-navy) !important;
  box-shadow: 0 2px 8px rgba(27, 42, 59, 0.08);
}

/* Individual nav links */
.bizberg-menu li a,
.navbar-default .navbar-nav > li > a {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hr-navy) !important;
  transition: color 0.2s ease;
  padding: 8px 14px;
}

.bizberg-menu li a:hover,
.navbar-default .navbar-nav > li > a:hover {
  color: var(--hr-gold) !important;
  background: transparent !important;
}

/* Site title (if shown as text rather than logo image) */
.site-branding .site-title a,
.navbar-brand {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hr-navy) !important;
  font-size: 1.4rem;
}


/* ============================================================
   8. HERO / BANNER SECTION
   Deep navy overlay replacing the old blue/pink gradient.
   ============================================================ */
.banner .slider .overlay,
body.home .breadcrumb-wrapper.homepage_banner .overlay,
body:not(.home) .breadcrumb-wrapper .overlay {
  background: linear-gradient(
    -90deg,
    rgba(27, 42, 59, 0.82) 0%,
    rgba(27, 42, 59, 0.38) 100%
  ) !important;
}

/* Hero text */
.breadcrumb-wrapper .section-title h1,
.slider-content h1,
.slider-content h2 {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hr-cream) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}


/* ============================================================
   9. BUTTONS & CALL-TO-ACTION LINKS
   Sharp corners (no border-radius) = 1980s print ad style.
   Navy fill, cream text, gold on hover.
   ============================================================ */
a.slider_btn,
.slider_btn,
.btn-primary,
a.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.elementor-button,
.wp-block-button__link {
  background: var(--hr-navy) !important;
  background-image: none !important;
  filter: none !important;
  color: var(--hr-cream) !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 2px solid var(--hr-navy) !important;
  border-radius: 0 !important;     /* sharp corners */
  padding: 12px 28px !important;
  display: inline-block;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

a.slider_btn:hover,
.btn-primary:hover,
a.button:hover,
button.button:hover,
.woocommerce a.button:hover,
.elementor-button:hover,
.wp-block-button__link:hover {
  background: var(--hr-gold) !important;
  border-color: var(--hr-gold) !important;
  color: var(--hr-white) !important;
}


/* ============================================================
   10. PAGE / CONTENT AREA BACKGROUND
   White card on warm cream — creates depth without shadow-heavy UI.
   ============================================================ */
.site-content,
#content,
main#main,
.entry-content,
.elementor-section.elementor-section-boxed {
  background-color: var(--hr-white);
}


/* ============================================================
   11. SECTION HEADINGS — gold rule underneath
   The ::after pseudo-element draws a short gold line below
   each section title — a signature 1980s advertising detail.
   ============================================================ */
.section-title h2::after,
.section-title h3::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--hr-gold);
  margin: 12px auto 0;
}

/* Left-aligned sections get a left-aligned rule */
.section-title.text-left h2::after,
.section-title.text-left h3::after {
  margin-left: 0;
}


/* ============================================================
   12. FOOTER
   This overrides the Bizberg footer completely.
   The footer HTML lives in footer.php (in this same folder).
   ============================================================ */
.hr-footer {
  background: var(--hr-navy);
  color: var(--hr-cream);
  border-top: 4px solid var(--hr-gold);
  padding: 48px 0 28px;
  font-family: 'EB Garamond', Georgia, serif;
}

.hr-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

/* Site name in footer */
.hr-footer__brand {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hr-cream);
}

.hr-footer__tagline {
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(245, 240, 232, 0.7);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

/* Gold divider line */
.hr-footer__rule {
  width: 80px;
  height: 2px;
  background: var(--hr-gold);
  border: none;
  margin: 0;
}

/* Footer nav links */
.hr-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
}

.hr-footer__nav li a {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hr-gold) !important;
  text-decoration: none;
  transition: color 0.2s;
}

.hr-footer__nav li a:hover {
  color: var(--hr-cream) !important;
  text-decoration: underline;
}

/* Social icons */
.hr-footer__social ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  justify-content: center;
}

.hr-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hr-gold);
  color: var(--hr-cream) !important;
  font-size: 1rem;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
}

.hr-footer__social a:hover {
  background: var(--hr-gold);
  color: var(--hr-navy) !important;
}

/* Copyright line */
.hr-footer__copyright {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: rgba(245, 240, 232, 0.6);
  margin: 0;
}


/* ============================================================
   13. WOOCOMMERCE — PRODUCT CARDS
   ============================================================ */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-weight: 700;
  color: var(--hr-navy) !important;
  letter-spacing: 0.03em;
}

.woocommerce ul.products li.product .price {
  font-family: 'EB Garamond', Georgia, serif !important;
  color: var(--hr-gold) !important;
  font-weight: 600;
}


/* ============================================================
   14. BLOCKQUOTES — 1980s pull-quote style
   ============================================================ */
blockquote {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-style: italic;
  font-size: 1.35rem;
  border-left: 4px solid var(--hr-gold) !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 16px 24px;
  margin: 2rem 0;
  background: var(--hr-cream);
  color: var(--hr-navy);
}


/* ============================================================
   15. PLUGIN ACCENT COLOUR OVERRIDES
   The WP Post Author plugin uses #b81e1e (dark red) for its
   hover states. We normalise it to our gold.
   ============================================================ */
.wp_post_author_widget .wp-post-author-meta .awpa-display-name > a:hover,
body .wp-post-author-wrap .awpa-display-name > a:hover {
  color: var(--hr-gold) !important;
}

.wp-post-author-meta .wp-post-author-meta-more-posts a.awpa-more-posts:hover,
.awpa-review-field .right-star .awpa-rating-button:not(:disabled):hover {
  color: var(--hr-gold) !important;
  border-color: var(--hr-gold) !important;
}


/* ============================================================
   16. NUCLEAR OPTION — kill remaining pink anywhere
   ─────────────────────────────────────────────────────────
   The Bizberg parent theme fires JavaScript that sets a pink
   hover colour on nav links. The JS reads from bizberg_object
   (see functions.php where we override it at source).

   These CSS rules are a belt-and-suspenders safety net that
   catches anything still slipping through — including cases
   where the browser normalises #e91e63 to its RGB equivalent.
   ============================================================ */
.editor_cat_background_0 {
  background-color: var(--hr-navy) !important;
}

/* Hex form — matches style="color: #e91e63" */
[style*="e91e63"],
[style*="E91E63"],
[style*="#e91e63"],
[style*="#E91E63"] {
  background-color: transparent !important;
  color: var(--hr-gold) !important;
}

/* RGB form — browsers often normalise hex to rgb() internally */
[style*="rgb(233, 30, 99)"],
[style*="rgb(233,30,99)"] {
  background-color: transparent !important;
  color: var(--hr-gold) !important;
}

/* Background-specific: when the theme sets a pink background */
[style*="background"][style*="e91e63"],
[style*="background"][style*="E91E63"],
[style*="background"][style*="rgb(233, 30, 99)"] {
  background-color: var(--hr-navy) !important;
  color: var(--hr-cream) !important;
}

/* Explicit nav hover override — highest specificity wins */
.bizberg-menu li a:hover,
.bizberg-menu li a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .current-menu-item > a {
  color: var(--hr-gold) !important;
  background: transparent !important;
}


/* ============================================================
   17. SOCIAL FEED SECTION
   Styles for the Instagram + YouTube blocks you'll add via
   the Elementor Custom HTML widget (see social-feeds.html).
   ============================================================ */
.hr-social-feeds {
  padding: 64px 24px;
  background: var(--hr-white);
}

.hr-social-feeds__header {
  text-align: center;
  margin-bottom: 48px;
}

.hr-social-feeds__label {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hr-gold);
  display: block;
  margin-bottom: 8px;
}

.hr-social-feeds__title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hr-navy);
  margin: 0 0 16px;
}

.hr-social-feeds__rule {
  width: 60px;
  height: 3px;
  background: var(--hr-gold);
  border: none;
  margin: 0 auto;
}

/* Two-column grid: Instagram left, YouTube right */
.hr-social-feeds__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Each feed column */
.hr-feed-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hr-feed-block__heading {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hr-navy);
  border-bottom: 2px solid var(--hr-navy);
  padding-bottom: 10px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hr-feed-block__heading i {
  color: var(--hr-gold);
  font-size: 1.1rem;
}

/* The iframe wrapper keeps YouTube at 16:9 ratio on all screens */
.hr-youtube-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.hr-youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* "View channel" link below YouTube */
.hr-feed-block__cta {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hr-navy);
  text-decoration: none;
  border-bottom: 2px solid var(--hr-gold);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
  align-self: flex-start;
}

.hr-feed-block__cta:hover {
  color: var(--hr-gold);
  text-decoration: none;
}

/* Stack on mobile */
@media (max-width: 768px) {
  .hr-social-feeds__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


/* ============================================================
   18. SMASH BALLOON INSTAGRAM FEED PLUGIN — colour overrides
   ─────────────────────────────────────────────────────────
   The Smash Balloon plugin loads its own stylesheet with
   Instagram's branded pink/purple/gradient colours. Every
   rule below replaces those with our navy + gold + cream
   palette so the feed looks native to the site design.

   HOW TO READ THESE SELECTORS:
   .sbi          = the main feed wrapper (older plugin versions)
   .sbi-          = newer plugin version prefix
   Both are targeted so it works regardless of plugin version.
   ============================================================ */

/* Feed container */
.sbi,
.sbi-feed-container {
  background: transparent !important;
}

/* ── HEADER (profile photo + name + follow button) ── */
.sbi_header,
.sbi-header {
  background: transparent !important;
  border-bottom: 1px solid #1b2a3b !important; /* --hr-navy */
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
}

/* Profile name text */
.sbi_header_text h3,
.sbi-header-text h3,
.sbi_header_text .sbi_header_name,
.sbi-header-text .sbi-header-name {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #1b2a3b !important; /* --hr-navy */
}

/* Bio / follower count text */
.sbi_header_text p,
.sbi-header-text p,
.sbi_header_text .sbi_bio,
.sbi-header-text .sbi-bio {
  font-family: 'EB Garamond', Georgia, serif !important;
  color: #1b2a3b !important;
}

/* Profile image border — replaces Instagram gradient ring */
.sbi_header_img_wrap img,
.sbi-header-img img,
.sbi_header .sbi_header_img,
.sbi-header .sbi-header-img {
  border: 2px solid #b8960c !important; /* --hr-gold */
  border-radius: 0 !important;           /* square, not circle = 1980s */
}

/* ── FOLLOW BUTTON ── */
/* Smash Balloon renders a "Follow on Instagram" button that is
   typically Instagram's pink/purple gradient. We replace it. */
.sbi_follow_btn a,
.sbi-follow-btn a,
.sbi_follow_btn,
.sbi-follow-btn,
#sbi_mod_link,
.sbi-btn {
  background: #1b2a3b !important;              /* --hr-navy */
  background-image: none !important;           /* kills the gradient */
  border: 2px solid #1b2a3b !important;
  border-radius: 0 !important;
  color: #f5f0e8 !important;                   /* --hr-cream */
  font-family: 'EB Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.sbi_follow_btn a:hover,
.sbi-follow-btn a:hover,
.sbi-btn:hover {
  background: #b8960c !important;              /* --hr-gold */
  border-color: #b8960c !important;
  color: #ffffff !important;
}

/* ── PHOTO GRID ── */
/* Remove any pink tint or overlay on the photos themselves */
.sbi_photo_wrap,
.sbi-image-container {
  border-radius: 0 !important;  /* square crops = editorial */
}

/* Hover overlay on photos — replaces any pink tint */
.sbi_photo_wrap:hover .sbi_hover_bottom,
.sbi-image-container:hover .sbi-overlay,
.sbi_photo_wrap .sbi_hover_bottom,
.sbi-image-container .sbi-overlay {
  background: rgba(27, 42, 59, 0.75) !important; /* navy, not pink */
}

/* Like / comment count text on hover */
.sbi_photo_wrap .sbi_hover_bottom p,
.sbi-image-container .sbi-overlay p,
.sbi_photo_wrap .sbi_hover_bottom span,
.sbi_hover_bottom .sbi_photo_likes,
.sbi_hover_bottom .sbi_photo_comments {
  color: #f5f0e8 !important;                   /* --hr-cream */
}

/* ── LOAD MORE BUTTON ── */
.sbi_load_btn,
.sbi-load-btn,
#sbi_load {
  background: #1b2a3b !important;
  background-image: none !important;
  border: 2px solid #1b2a3b !important;
  border-radius: 0 !important;
  color: #f5f0e8 !important;
  font-family: 'EB Garamond', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.sbi_load_btn:hover,
.sbi-load-btn:hover {
  background: #b8960c !important;
  border-color: #b8960c !important;
}

/* ── POWERED BY LINK (small footer text) ── */
.sbi_powered_by,
.sbi-powered-by {
  display: none; /* hides the "Powered by Smash Balloon" text */
}

/* ── GENERAL: catch any remaining pink in Smash Balloon ── */
.sbi *[style*="e91e63"],
.sbi *[style*="rgb(233, 30, 99)"],
.sbi-feed-container *[style*="e91e63"] {
  color: #b8960c !important;
  background-color: transparent !important;
}
/* Instagram's signature gradient used on some elements */
.sbi *[style*="linear-gradient"][style*="833ab4"],
.sbi *[style*="linear-gradient"][style*="fd1d1d"] {
  background: #1b2a3b !important;
  background-image: none !important;
}


/* ============================================================
   16. MOBILE — responsive adjustments
   ============================================================ */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  body { font-size: 17px; }

  .navbar-default .navbar-nav > li > a {
    letter-spacing: 0.05em;
  }

  .hr-footer__nav ul {
    gap: 10px 20px;
  }
}